Skip to content

Commit bf8310b

Browse files
r11ar11a
committed
Polish tablet fallback visuals
1 parent fcd0237 commit bf8310b

2 files changed

Lines changed: 262 additions & 42 deletions

File tree

‎dist/homeii-music-flow.js‎

Lines changed: 131 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4408,6 +4408,7 @@
44084408
<article class="control-room-tile ${art ? "has-art" : "no-art"} ${isSelected ? "selected" : ""} ${isPrimary ? "primary" : ""} ${playing ? "is-playing" : ""}" data-room-tile="${this._esc(player.entity_id)}" ${tileStyle}>
44094409
<div class="control-room-tile-bg"></div>
44104410
<div class="control-room-tile-shade"></div>
4411+
${art ? "" : `<div class="control-room-tile-logo">${this._brandLogoImgHtml("homeii-logo-fallback control-room-logo")}</div>`}
44114412
<button class="control-room-select-fab ${isSelected ? "active" : ""}" data-room-select="${this._esc(player.entity_id)}" title="${this._esc(this._m("Select player", "בחר נגן"))}">
44124413
${this._iconSvg(isSelected ? "check" : "grid")}
44134414
</button>
@@ -15055,16 +15056,18 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
1505515056
background:rgba(235,240,255,.88);
1505615057
}
1505715058
.player-focus-art-wrap {
15058-
display:none;
15059+
display:flex;
1505915060
align-items:center;
1506015061
justify-content:center;
15061-
width:100%;
15062+
width:auto;
15063+
flex:none;
1506215064
}
1506315065
.player-focus-art {
15064-
width:54px;
15065-
height:54px;
15066-
border-radius:18px;
15067-
display:block;
15066+
width:32px;
15067+
height:32px;
15068+
border-radius:999px;
15069+
display:grid;
15070+
place-items:center;
1506815071
background:rgba(255,255,255,.08) center/cover no-repeat;
1506915072
border:1px solid rgba(255,255,255,.14);
1507015073
box-shadow:0 12px 26px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.08);
@@ -15076,6 +15079,20 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
1507615079
radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--ma-accent) 34%, rgba(255,255,255,.14)), transparent 42%),
1507715080
linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
1507815081
}
15082+
.player-focus-art.brand-logo {
15083+
background:
15084+
radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--ma-accent) 30%, rgba(255,255,255,.18)), transparent 48%),
15085+
rgba(255,255,255,.08);
15086+
}
15087+
.player-focus-logo {
15088+
width:76%;
15089+
height:76%;
15090+
object-fit:contain;
15091+
border-radius:999px;
15092+
filter:drop-shadow(0 8px 16px rgba(0,0,0,.22));
15093+
position:relative;
15094+
z-index:1;
15095+
}
1507915096
.player-focus-art::after {
1508015097
content:"";
1508115098
position:absolute;
@@ -15125,7 +15142,7 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
1512515142
.card.layout-tablet .player-focus-art {
1512615143
width:68px;
1512715144
height:68px;
15128-
border-radius:22px;
15145+
border-radius:999px;
1512915146
}
1513015147
.player-focus-name {
1513115148
font-size:calc(12px * var(--v2-font-scale));
@@ -15630,7 +15647,7 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
1563015647
.fallback-disc {
1563115648
width:104px;
1563215649
height:104px;
15633-
border-radius:34px;
15650+
border-radius:999px;
1563415651
display:grid;
1563515652
place-items:center;
1563615653
background:rgba(12,16,24,.36);
@@ -15647,26 +15664,40 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
1564715664
max-width:100%;
1564815665
max-height:100%;
1564915666
object-fit:contain;
15667+
border-radius:999px;
1565015668
display:block;
1565115669
margin:auto;
1565215670
filter:drop-shadow(0 12px 24px rgba(0,0,0,.24));
1565315671
}
1565415672
.fallback-logo {
1565515673
background:rgba(255,255,255,.12);
1565615674
padding:14px;
15675+
overflow:hidden;
1565715676
}
1565815677
.fallback-logo .homeii-logo-fallback {
1565915678
width:100%;
1566015679
height:100%;
1566115680
}
15681+
.menu-thumb:has(.homeii-logo-fallback),
15682+
.history-chip-art:has(.homeii-logo-fallback),
15683+
.control-room-picker-art:has(.homeii-logo-fallback),
15684+
.control-room-transfer-art:has(.homeii-logo-fallback),
15685+
.player-premium-art:has(.homeii-logo-fallback),
15686+
.group-player-art:has(.homeii-logo-fallback) {
15687+
border-radius:999px;
15688+
padding:8px;
15689+
background:
15690+
radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--ma-accent) 28%, rgba(255,255,255,.14)), transparent 48%),
15691+
rgba(255,255,255,.08);
15692+
}
1566215693
.menu-thumb .homeii-logo-fallback,
1566315694
.history-chip-art .homeii-logo-fallback,
1566415695
.control-room-picker-art .homeii-logo-fallback,
1566515696
.control-room-transfer-art .homeii-logo-fallback,
1566615697
.player-premium-art .homeii-logo-fallback,
1566715698
.group-player-art .homeii-logo-fallback {
15668-
width:76%;
15669-
height:76%;
15699+
width:72%;
15700+
height:72%;
1567015701
filter:drop-shadow(0 6px 12px rgba(0,0,0,.2));
1567115702
}
1567215703
.surprise-me-logo {
@@ -17220,6 +17251,23 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
1722017251
.card.empty-media .progress-line {
1722117252
display:none;
1722217253
}
17254+
.card.layout-tablet.empty-media .hero-split-shell {
17255+
grid-template-columns:minmax(0, 1fr) !important;
17256+
justify-items:center;
17257+
}
17258+
.card.layout-tablet.empty-media .hero-visual,
17259+
.card.layout-tablet.empty-media .art-stage,
17260+
.card.layout-tablet.empty-media .mobile-art-shell,
17261+
.card.layout-tablet.empty-media .art-stack-view,
17262+
.card.layout-tablet.empty-media .art-stack-viewport,
17263+
.card.layout-tablet.empty-media .art-stack-container {
17264+
display:none !important;
17265+
}
17266+
.card.layout-tablet.empty-media .hero-info {
17267+
max-width:min(820px, 100%);
17268+
align-items:center;
17269+
text-align:center;
17270+
}
1722317271
.card.radio-media .empty-quick-shelf {
1722417272
display:none !important;
1722517273
}
@@ -17310,7 +17358,7 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
1731017358
.card.layout-tablet .player-focus-art {
1731117359
width:60px;
1731217360
height:60px;
17313-
border-radius:20px;
17361+
border-radius:999px;
1731417362
overflow:hidden;
1731517363
background-size:cover;
1731617364
background-position:center;
@@ -17977,6 +18025,37 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
1797718025
color:#101722;
1797818026
text-shadow:0 10px 26px color-mix(in srgb, var(--ma-accent) 28%, transparent);
1797918027
}
18028+
.card.layout-tablet .lyrics-backdrop {
18029+
align-items:center;
18030+
padding:max(44px, env(safe-area-inset-top)) max(34px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(34px, env(safe-area-inset-left));
18031+
}
18032+
.card.layout-tablet .lyrics-sheet {
18033+
width:min(1320px, calc(100% - 96px));
18034+
max-height:calc(100% - 96px);
18035+
border-radius:34px;
18036+
}
18037+
.card.layout-tablet .lyrics-head {
18038+
align-items:center;
18039+
gap:16px;
18040+
padding:22px 24px 18px;
18041+
}
18042+
.card.layout-tablet .lyrics-title-wrap {
18043+
min-width:0;
18044+
padding-inline:24px;
18045+
}
18046+
.card.layout-tablet .lyrics-title,
18047+
.card.layout-tablet .lyrics-sub {
18048+
white-space:nowrap;
18049+
overflow:hidden;
18050+
text-overflow:ellipsis;
18051+
}
18052+
.card.layout-tablet .lyrics-title {
18053+
font-size:clamp(24px, 2.8vw, 34px);
18054+
line-height:1.18;
18055+
}
18056+
.card.layout-tablet .lyrics-body {
18057+
padding-block-start:clamp(34px, 5vh, 56px);
18058+
}
1798018059
@media (max-width: 600px) {
1798118060
.lyrics-backdrop {
1798218061
align-items:stretch;
@@ -19695,27 +19774,45 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
1969519774
gap:14px;
1969619775
}
1969719776
.announcement-target {
19698-
min-height:56px;
19777+
min-height:68px;
1969919778
display:grid;
19700-
grid-template-columns:22px minmax(0,1fr);
19779+
grid-template-columns:54px minmax(0,1fr);
1970119780
align-items:center;
19702-
gap:10px;
19703-
padding:0 12px;
19704-
border-radius:20px;
19781+
gap:12px;
19782+
padding:8px 12px;
19783+
border-radius:22px;
1970519784
border:1px solid color-mix(in srgb, var(--ma-accent) 24%, transparent);
1970619785
background:color-mix(in srgb, var(--ma-accent) 12%, transparent);
1970719786
font-size:17px;
1970819787
font-weight:950;
1970919788
}
19789+
.announcement-target-icon {
19790+
width:46px;
19791+
height:46px;
19792+
border-radius:17px;
19793+
display:grid;
19794+
place-items:center;
19795+
color:#18120a;
19796+
background:linear-gradient(135deg, var(--ma-accent), color-mix(in srgb, var(--ma-accent) 72%, white 28%));
19797+
box-shadow:0 14px 24px color-mix(in srgb, var(--ma-accent) 20%, transparent);
19798+
}
19799+
.announcement-target-icon .ui-ic {
19800+
width:22px;
19801+
height:22px;
19802+
}
1971019803
.announcement-target-select {
1971119804
width:100%;
1971219805
min-width:0;
19806+
min-height:48px;
1971319807
border:none;
1971419808
background:transparent;
1971519809
box-shadow:none;
1971619810
padding:0;
1971719811
font:inherit;
1971819812
color:inherit;
19813+
white-space:nowrap;
19814+
overflow:hidden;
19815+
text-overflow:ellipsis;
1971919816
}
1972019817
.theme-dark .announcement-target {
1972119818
background:rgba(20,24,32,.74);
@@ -19828,12 +19925,15 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
1982819925
border-color:rgba(147,161,183,.18);
1982919926
}
1983019927
.announcement-send-btn {
19831-
min-height:58px;
19928+
min-height:62px;
19929+
display:flex !important;
19930+
flex-direction:row !important;
19931+
align-items:center;
1983219932
justify-content:center;
19833-
gap:10px;
19933+
gap:12px;
1983419934
font-size:17px;
1983519935
}
19836-
.announcement-send-btn .ui-ic { width:22px; height:22px; }
19936+
.announcement-send-btn .ui-ic { width:24px; height:24px; flex:none; }
1983719937
.settings-stat-row {
1983819938
display:flex;
1983919939
align-items:center;
@@ -20222,6 +20322,9 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
2022220322
.theme-light .control-room-tile-shade{background:
2022320323
linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 20%, rgba(245,248,252,.54) 66%, rgba(245,248,252,.9) 100%),
2022420324
linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,.04) 100%);}
20325+
.control-room-tile-logo{position:absolute;inset-block-start:16px;inset-inline-start:16px;width:70px;height:70px;border-radius:999px;display:grid;place-items:center;padding:10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12);z-index:1;overflow:hidden;}
20326+
.theme-light .control-room-tile-logo{background:rgba(255,255,255,.58);border-color:rgba(27,40,62,.08);}
20327+
.control-room-tile-logo .homeii-logo-fallback{width:100%;height:100%;object-fit:contain;border-radius:999px;}
2022520328
.control-room-tile-main,.control-room-volume-row,.control-room-select-fab{position:relative;z-index:1;}
2022620329
.control-room-tile-main{display:flex;align-items:flex-end;justify-content:flex-start;min-height:100%;background:none;border:none;color:inherit;text-align:inherit;padding:0;}
2022720330
.control-room-select-fab{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:40px;height:40px;padding:0;border-radius:15px;border:1px solid rgba(255,255,255,.14);background:rgba(9,12,18,.28);color:#fff;display:grid;place-items:center;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 22px rgba(0,0,0,.18);}
@@ -21008,8 +21111,15 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
2100821111
|| this._imageUrl(player?.attributes?.entity_picture, 180)
2100921112
|| this._imageUrl(player?.attributes?.media_image_url, 180)
2101021113
|| "";
21011-
thumb.style.backgroundImage = art ? `url("${art}")` : "";
2101221114
thumb.classList.toggle("placeholder", !art);
21115+
thumb.classList.toggle("brand-logo", !art);
21116+
if (art) {
21117+
thumb.style.backgroundImage = `url("${art}")`;
21118+
thumb.innerHTML = "";
21119+
} else {
21120+
thumb.style.backgroundImage = "";
21121+
thumb.innerHTML = this._brandLogoImgHtml("homeii-logo-fallback player-focus-logo");
21122+
}
2101321123
}
2101421124
this._syncMobilePlayerNavButtons();
2101521125
this._setMobileRandomFabVisible(true);
@@ -22846,7 +22956,7 @@ class HomeiiMusicFlowBaseCard extends HomeiiBaseMusicCard {
2284622956
return `
2284722957
<div class="announcements-shell">
2284822958
<div class="announcement-target">
22849-
<span class="menu-title-icon">${this._iconSvg("speaker")}</span>
22959+
<span class="announcement-target-icon">${this._iconSvg("speaker")}</span>
2285022960
<select class="media-sort-select announcement-target-select" id="mobileAnnouncementTargetSelect" aria-label="${this._esc(this._m("Announcement target", "יעד כריזה"))}">
2285122961
${targetOptions.map(([value, label]) => `<option value="${this._esc(value)}" ${value === targetValue ? "selected" : ""}>${this._esc(label)}</option>`).join("")}
2285222962
</select>

0 commit comments

Comments
 (0)