From 81d277b91d4d94b2d20fa4d5c6daeff6d941a0d7 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Mon, 6 Dec 2021 23:38:07 -0800 Subject: [PATCH] Adds PIP and fullscreen to MV, need glyph for PIP --- resources/cider-ui-tests/index.js | 4 +- resources/cider-ui-tests/style.css | 43 +- resources/cider-ui-tests/views/main.ejs | 673 +++++++++--------- .../cider-ui-tests/views/svg/fullscreen.svg | 55 ++ 4 files changed, 438 insertions(+), 337 deletions(-) create mode 100644 resources/cider-ui-tests/views/svg/fullscreen.svg diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js index 53c60263..4f62242d 100644 --- a/resources/cider-ui-tests/index.js +++ b/resources/cider-ui-tests/index.js @@ -211,10 +211,10 @@ const app = new Vue({ if (type.includes("musicVideo")){ document.getElementById("apple-music-video-container").style.display = "block"; - app.chrome.topChromeVisible = false + // app.chrome.topChromeVisible = false } else { document.getElementById("apple-music-video-container").style.display = "none"; - app.chrome.topChromeVisible = true + // app.chrome.topChromeVisible = true } self.chrome.artworkReady = false self.lyrics = [] diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css index c0424d01..c9352668 100644 --- a/resources/cider-ui-tests/style.css +++ b/resources/cider-ui-tests/style.css @@ -1879,8 +1879,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track { float: left; display: none; width: 100%; - height: 100%; - top: 0; + height: calc(100% - var(--chromeHeight)); + bottom: 0; z-index: 100000; } @@ -1906,6 +1906,45 @@ input[type=range].web-slider::-webkit-slider-runnable-track { float: left; width: 100%; margin: 10px; + cursor: pointer; +} + +#apple-music-video-player-controls #player-pip{ + position: absolute; + z-index: 100001; + width: 32px; + height: 32px; + margin: 10px; + right: 50px; + border-radius: 100%; + background: rgb(255 255 255 / 50%); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +#apple-music-video-player-controls #player-pip>svg { + width: 50%; +} + +#apple-music-video-player-controls #player-fullscreen{ + position: absolute; + z-index: 100001; + width: 32px; + height: 32px; + margin: 10px; + right: 0px; + border-radius: 100%; + background: rgb(255 255 255 / 50%); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +#apple-music-video-player-controls #player-fullscreen>svg { + width: 50%; } #apple-music-video-player-controls:hover{ diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs index ca2eda95..b00de4e7 100644 --- a/resources/cider-ui-tests/views/main.ejs +++ b/resources/cider-ui-tests/views/main.ejs @@ -2,15 +2,15 @@ - - - - - - - - - + + + + + + + + + @@ -23,334 +23,341 @@ -
-
-
-
-
-
-
-
-
- - -
-
- -
-
- - -
-
- -
-
- +
+
+ +
+
+ + +
+
+ +
+
+ - - +
-
-
-
-