diff --git a/src/renderer/index.js b/src/renderer/index.js index 2dda44f5..b7becc6a 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -101,6 +101,7 @@ class NavigationEvent { const app = new Vue({ el: "#app", data: { + appMode: "player", ipcRenderer: ipcRenderer, cfg: ipcRenderer.sendSync("getStore"), isDev: ipcRenderer.sendSync("is-dev"), diff --git a/src/renderer/style.less b/src/renderer/style.less index f1caa3e9..fe5f7289 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -183,6 +183,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { width: 100%; height: 100%; flex-direction: column; + opacity: 1; } #app-sidebar { @@ -2897,6 +2898,44 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } } +.fullscreen-view-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: black; + z-index: 99; + display: flex; + justify-content: center; + align-items: center; + opacity: 1; +} + +.fullscreen-view { + width: 100%; + height: 100%; + background: black; + display: flex; + justify-content: center; + align-items: center; + + .fs-row { + flex-grow: 1; + } + + .artwork-col { + justify-content: center; + align-items: center; + display: flex; + + .artwork { + width: 50vh; + height: 50vh; + } + } +} + /* Cider */ /* Transitions */ @@ -2944,6 +2983,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { transform: scale(0.5); } +.fsModeSwitch-enter-active, +.fsModeSwitch-leave-active { + transition: transform 1s var(--appleEase), opacity 1s var(--appleEase); +} + +.fsModeSwitch-enter, +.fsModeSwitch-leave-to { + transform: scale(1.10); + opacity: 0; +} + + .drawertransition-enter-active, .drawertransition-leave-active { transition: right .25s var(--appleEase); diff --git a/src/renderer/views/components/fullscreen.ejs b/src/renderer/views/components/fullscreen.ejs new file mode 100644 index 00000000..2003cb5b --- /dev/null +++ b/src/renderer/views/components/fullscreen.ejs @@ -0,0 +1,34 @@ + + + \ No newline at end of file diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index 57fe3816..8772ce13 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -29,407 +29,426 @@
-
-
-
-
-
-
+ +
+
+
+
+
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + + +
-
- - -
-
- -
-
- - -
-
- -
-
- - - -
-
-
-
- - -
-
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- +
+
+
+
-
-
-
-
-
-
-
- Apple Music +
+
- - - -
- Library +
+
- - - - - -
- Playlists -
- -
- -
-
- - - - - - +
+
+
+
+
+
+
- -
- - -
-
-
{{ library.downloadNotification.message }}
-
{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }}
-
- -
-
- - - - - - - <%- include('pages/zoo') %> - - - <%- include('pages/webview') %> - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + <%- include('pages/library-recentlyadded') %>'); + + + + <%- include('pages/library-songs') %> + + + + <%- include('pages/library-albums') %>'); + %> + + + + + + + + + + + + +
- + +
+ + +
+ +
-
+ + +
+ +
+ @@ -450,15 +469,20 @@ fill-rule="nonzero"/>
-
{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ? - lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ? - (lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "") : '')}} +
{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] && + lyrics[currentLyricsLine].line ) ? + lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ? ((lyrics.length + > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ? + (lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "") : + '')}}
-
<%- include("svg/fullscreen.svg") %>
-
<%- include("svg/fullscreen.svg") %>
@@ -541,6 +565,8 @@ <%- include('components/animatedartwork-view') %> <%- include('components/lyrics-view') %> + +<%- include('components/fullscreen') %>