diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json index a75588dd..032191ad 100644 --- a/src/i18n/en_US.json +++ b/src/i18n/en_US.json @@ -205,6 +205,7 @@ "term.zoomout" : "Zoom Out", "term.zoomreset" : "Reset Zoom", "term.fullscreen" : "Fullscreen", + "term.nowPlaying": "Now Playing", "home.syncFavorites": "Sync Favorites", "home.syncFavorites.gettingArtists": "Getting Favorited Artists...", "home.title": "Home", diff --git a/src/renderer/less/fullscreen.less b/src/renderer/less/fullscreen.less index 3c4ef17d..d1f7466e 100644 --- a/src/renderer/less/fullscreen.less +++ b/src/renderer/less/fullscreen.less @@ -19,6 +19,7 @@ display: flex; justify-content: center; align-items: center; + --chromeHeight1: 60px; .app-content-container { width:100%; @@ -26,11 +27,102 @@ #app-content { width:100%; height:100%; + + .fs-search { + + .search-input--icon { + width: 4em; + background-size: 40%; + background-position: center; + } + input { + padding-left: 2em; + font-size: 2em; + border-radius: var(--mediaItemRadius) + } + } } } + .fs-header { + position: fixed; + top: 0; + left: 0; + right: 0; + height: var(--chromeHeight1); + background: var(--color1); + backdrop-filter: var(--glassFilter); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; + .top-nav-group { + background : #1e1e1e99; + border : 1px solid lighten(@baseColor, 8); + border-radius: 12px; + display : flex; + height : 42px; + width: 90%; + .app-sidebar-item { + background-color: #1e1e1e00; + border-radius : 10px !important; + border : 0px; + min-width : 120px; + padding : 6px; + justify-content : center; + align-items : center; + margin : 0px; + height : 100%; + position : relative; + + &:before { + --dist : 1px; + content : ''; + position : absolute; + top : var(--dist); + left : var(--dist); + right : var(--dist); + bottom : var(--dist); + background-color: #fff; + opacity : 0; + border-radius : 10px; + transform : scale(0.5); + transition : transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + } + + &:after { + display: none; + } + + &:hover { + background-color: transparent; + + &:before { + transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; + opacity : .1; + transform : scale(1); + } + } + + &.active { + background-color: transparent; + + &:before { + opacity : .2; + transform: scale(1); + } + } + + &.md-btn-primary { + box-shadow : 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8); + background-color: lighten(@baseColor, @colorMixRate * 5); + z-index : 1; + } + } + } + } .fs-row { flex-grow: 0.5; @@ -389,4 +481,84 @@ } } + + .cd-mediaitem-square { + font-size: 17px; + font-weight: 500; + } + + .cd-mediaitem-square .artwork-container .artwork { + box-shadow: var(--mediaItemShadow-Shadow); + } + + .cd-mediaitem-list-item { + height: 80px; + } + + .cd-mediaitem-list-item .title { + font-size: 1.2em; + font-weight: 450; + } + + .cd-mediaitem-list-item .subtitle { + font-size: 1.1em; + font-weight: 380; + } + + .cd-mediaitem-list-item .artwork { + width: 50px; + height: 50px; + } + + .header-text { + font-size: 3em; + height: 3em; + padding-left: 0.2em; + } + + .grouping-container .grouping-btn { + font-size: 1.3em; + color: var(--textColor); + background-color: var(--sidebarColor); + font-weight: 600; + padding: 32px; + //box-shadow: var(--ciderShadow-Generic); + } + + .content-inner.playlist-page { + display: flex; + flex-direction: row; + } + + .playlist-page .playlist-display { + width: 100%; + max-width: 500px; + flex:1; + text-align: center; + + .playlistInfo { + >.row { + justify-content: center; + } + } + + .playlist-controls { + div { + width:100%; + } + } + } + .playlist-page .mediaContainer { + width: 30vh; + height: 30vh; + aspect-ratio: 1; + } + .playlist-page .playlist-display .playlistInfo .playlist-info { + gap: 16px; + margin-top: 40px; + } + + .playlist-page .playlist-body { + flex: 1; + } } diff --git a/src/renderer/style.css b/src/renderer/style.css index 6b649983..8fbc9118 100644 --- a/src/renderer/style.css +++ b/src/renderer/style.css @@ -12074,7 +12074,7 @@ input[type=checkbox][switch]:checked:active::before { align-items: center; color: white; } -.playback-button.navigation > svg { +.playback-button.navigation > ._svg-icon { height: 16px; width: 16px; pointer-events: none; @@ -14663,6 +14663,9 @@ input[type=checkbox][switch]:checked:active::before { padding-top: 48px; border-left: 1px solid var(--borderColor); } +#hid___BV_tab_button__ { + display: none; +} :root { --appleEase: cubic-bezier(0.42, 0, 0.58, 1); --borderColor: rgba(200, 200, 200, 0.16); diff --git a/src/renderer/views/components/fullscreen.ejs b/src/renderer/views/components/fullscreen.ejs index 1d191de3..23704f20 100644 --- a/src/renderer/views/components/fullscreen.ejs +++ b/src/renderer/views/components/fullscreen.ejs @@ -12,6 +12,24 @@ +
+
+ + + + + + + + + + + + + +
+
@@ -180,7 +198,8 @@ return { app: this.$root, tabMode: "lyrics", - video: null + video: null, + immersiveEnabled: app.cfg.advanced.experiments.includes("immersive-preview") } }, async mounted() { diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs index d1614bdc..baac65f4 100644 --- a/src/renderer/views/components/settings-window.ejs +++ b/src/renderer/views/components/settings-window.ejs @@ -1220,6 +1220,21 @@
+ +
+
+ Immersive Fullscreen Test +
+
+ +
+
+
{{$root.getLz('settings.option.experimental.unknownPlugin')}} diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs index 5860b1f1..eaae58b8 100644 --- a/src/renderer/views/pages/cider-playlist.ejs +++ b/src/renderer/views/pages/cider-playlist.ejs @@ -333,6 +333,9 @@ }, methods: { minClass(val) { + if(app.appMode == 'fullscreen') { + return + } if (val) { this.classes = ["plmin"] } else { diff --git a/src/renderer/views/pages/search.ejs b/src/renderer/views/pages/search.ejs index 966404e8..602b6c75 100644 --- a/src/renderer/views/pages/search.ejs +++ b/src/renderer/views/pages/search.ejs @@ -1,5 +1,22 @@