nik/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2026-05-03 06:51:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update EmbedCodeField.jsx

Browse Source
This commit is contained in:
Sora 2026-01-20 12:04:46 +08:00
parent d57ed1de85
commit 4a5d5dcaf0
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/src/share/EmbedCodeField.jsx
View File

@ -84,7 +84,7 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
<div id="navidrome-floating-player"> <div id="navidrome-floating-player">
<div id="nav-player-container" class="nav-collapsed"> <div id="nav-player-container" class="nav-collapsed">
<div id="nav-player-toggle" onclick="toggleNavPlayer()"> <div id="nav-player-toggle" onclick="toggleNavPlayer()">
<span id="nav-toggle-icon">🎵</span> <span id="nav-toggle-icon">♪</span>
</div> </div>
<div id="nav-player-content"> <div id="nav-player-content">
<iframe src="${url}" frameborder="0" allowfullscreen></iframe> <iframe src="${url}" frameborder="0" allowfullscreen></iframe>
@ -107,6 +107,8 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
overflow: hidden; overflow: hidden;
transition: all 0.3s ease; transition: all 0.3s ease;
display: flex;
flex-direction: column;
} }
#nav-player-container.nav-collapsed { #nav-player-container.nav-collapsed {
@ -122,13 +124,22 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
#nav-player-toggle { #nav-player-toggle {
width: 60px; width: 60px;
height: 60px; height: 60px;
min-height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
border-radius: 12px;
transition: all 0.3s ease; transition: all 0.3s ease;
flex-shrink: 0;
}
#nav-player-container.nav-expanded #nav-player-toggle {
border-radius: 12px 12px 0 0;
}
#nav-player-container.nav-collapsed #nav-player-toggle {
border-radius: 12px;
} }
#nav-player-toggle:hover { #nav-player-toggle:hover {
@ -138,17 +149,20 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
#nav-toggle-icon { #nav-toggle-icon {
font-size: 28px; font-size: 28px;
color: white;
transition: transform 0.3s ease; transition: transform 0.3s ease;
user-select: none;
} }
#nav-player-container.nav-expanded #nav-toggle-icon { #nav-player-container.nav-expanded #nav-toggle-icon {
transform: rotate(90deg); transform: rotate(180deg);
} }
#nav-player-content { #nav-player-content {
display: none; display: none;
width: 380px; width: 100%;
height: 460px; flex: 1;
overflow: hidden;
} }
#nav-player-container.nav-expanded #nav-player-content { #nav-player-container.nav-expanded #nav-player-content {
@ -159,6 +173,7 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
display: block;
} }
/* 移动端适配 */ /* 移动端适配 */
@ -173,10 +188,6 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
height: 480px; height: 480px;
max-width: 380px; max-width: 380px;
} }
#nav-player-content {
width: 100%;
}
} }
</style> </style>