From a29dfdd67a4f54a1fe4d16a1e76b20b4879cc228 Mon Sep 17 00:00:00 2001 From: ThaUnknown Date: Mon, 29 Mar 2021 00:51:06 +0200 Subject: [PATCH] questionable CSS optimisations, CSS restructure --- app/css/misc.css | 1 + app/css/player.css | 289 ----------------------------------- app/css/torrent-player.css | 298 +++++++++++++++++++++++++++++++++++++ app/index.html | 151 +++++++++---------- app/js/player.js | 20 ++- 5 files changed, 381 insertions(+), 378 deletions(-) delete mode 100644 app/css/player.css create mode 100644 app/css/torrent-player.css diff --git a/app/css/misc.css b/app/css/misc.css index 1e5fdef..1860995 100644 --- a/app/css/misc.css +++ b/app/css/misc.css @@ -1,4 +1,5 @@ :root { + --accent-color: #e5204c; --dm-link-text-color: var(--dm-muted-text-color) !important; --dm-link-text-color-hover: var(--dm-text-color) !important; --base-html-font-size: 50%; diff --git a/app/css/player.css b/app/css/player.css deleted file mode 100644 index ec01715..0000000 --- a/app/css/player.css +++ /dev/null @@ -1,289 +0,0 @@ -:root { - font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - --accent-color: #e5204c; - --volume-level: 100%; - --progress: 0%; - --buffer: 0%; - --download: 0%; - color: #b6b6b6; - --ts: ""; - --miniplayer-display: flex; -} - -/*PLAYER*/ - -.immersed { - cursor: none -} - -.immersed .controls, -.immersed .stats { - opacity: 0; -} - -#player:target { - bottom: 0; - right: 0; - position: relative; - align-self: center; - width: 100%; - height: 100%; - transition: none !important; -} - -#player { - will-change: width, right, bottom, position, display; - position: fixed; - display: var(--miniplayer-display); - bottom: 2rem; - right: 2rem; - width: 25%; - transition: width .2s ease; - z-index: 10; - flex-direction: column; - justify-content: center; -} - -#player>a { - position: absolute; - z-index: 10 -} - -#player:target .player { - display: flex !important -} -#player.pip{ - background: #000 -} -#player.pip canvas { - left: 99.9% !important /*hack to hide the canvas but still keep it updating*/ -} - -.controls { - background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 25%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .1) 75%, transparent); - transition: .5s opacity ease; -} - -.stats { - background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 25%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .1) 75%, transparent); - transition: .5s opacity ease; - border-width: 0; - border-top-width: 1px; - border-image-slice: 1; - border-style: solid; - border-image-source: linear-gradient(90deg, #e5204c var(--download), rgba(0, 0, 0, .8) var(--download)) -} - -.stats span { - display: flex; -} - -#peers::after, #downSpeed::after, #upSpeed::after{ - content: attr(data-value); - font-size: 1.8rem !important; - white-space: nowrap; - align-self: center; - font-weight: 600; - font-family: Roboto, Arial, Helvetica, sans-serif; - padding-left: 1.2rem; -} - -.player { - position: absolute; - user-select: none; - opacity: 1; - font-family: Roboto, Arial, Helvetica, sans-serif -} - -.controls>*:hover { - filter: drop-shadow(0 0 8px #000) -} - -.controls span { - cursor: pointer -} - -.player span { - font-size: 2.2rem !important; - color: #ececec; - padding: 1.2rem; - transition: all .2s ease; -} - -.player .ts { - font-size: 1.8rem !important; - white-space: nowrap; - align-self: center; - cursor: default; - padding: 0 1.2rem; - font-weight: 600 -} - -#video { - width: 100%; - height: 100% -} - -.volume { - display: flex; - width: auto -} - -.volume:hover>input[type=range] { - width: 5vw; - display: inline-block; - transition: all .1s ease; - margin-right: 1rem -} - -.volume>input[type=range] { - width: 0; - transition: all .1s ease; -} - -.controls input[type=range] { - -webkit-appearance: none; - background: transparent; - margin: 0; - cursor: pointer; -} - -.controls input[type=range]:focus { - outline: none; -} - -#volume::-webkit-slider-runnable-track { - height: 3px; - background: linear-gradient(90deg, #e5204c var(--volume-level), rgba(255, 255, 255, .2) var(--volume-level)) -} - -.controls input[type=range]:hover::-webkit-slider-thumb { - height: 12px; - width: 12px; - margin-top: -4px -} - -.controls input[type=range]::-webkit-slider-thumb { - height: 0; - width: 0; - border-radius: 50%; - background: var(--accent-color); - -webkit-appearance: none; - margin-top: 2px; - transition: all .1s ease -} - -#progress::-webkit-slider-runnable-track { - height: 3px; - background: linear-gradient(90deg, #e5204c var(--progress), rgba(255, 255, 255, .4) var(--progress), rgba(255, 255, 255, .4) var(--buffer), rgba(255, 255, 255, .2) var(--buffer)) -} - -#progress, -.prog, -.prog div{ - display: flex; - width: 100%; - height: 100%; - position: relative; -} - -#progress+img, -#progress::before { - pointer-events: none; - opacity: 0; - position: absolute; - transform: translate(-50%, -100%); - font-family: Roboto, Arial, Helvetica, sans-serif; - color: #ececec; - white-space: nowrap; - align-self: center; - left: var(--progress); - font-weight: 600; - transition: .2s opacity ease -} - -#progress+img { - content: ""; - height: 0; - top: -2rem; - width: 150px; -} - -#progress::before { - top: .5rem; - content: attr(data-elapsed); -} - -.prog::before, -.prog::after { - color: #ececec; - font-size: 1.8rem !important; - white-space: nowrap; - align-self: center; - cursor: default; - line-height: var(--base-line-height); - padding: 0 1.2rem; - font-weight: 600; -} -.prog::before { - content: attr(data-elapsed) -} -.prog::after { - content: attr(data-remaining) -} - -#progress { - display: flex; -} - -#progress:active+img, -#progress:active::before { - opacity: 1 -} - -.ctrl[disabled], -#player:fullscreen #bpip, -#player:fullscreen #btheatre, -#player:fullscreen #bpl, -#player:target>a, -#progress+img[src=" "], -video[src=""], -#player.pip video, -#bcap[disabled], #baudio[disabled] { - display: none !important -} - -#dl[disabled] { - display:block !important; - cursor: not-allowed; - color: rgba(255, 255, 255, .4); -} - -#nowPlayingDisplay { - padding-left: 1.2rem !important; -} - -#buffering { - border: 4px solid #FFFFFF00; - border-top: 4px solid #fff; - border-radius: 50%; - width: 40px; - height: 40px; - animation: spin 1s linear infinite; - opacity: 1; - transition: .5s opacity ease; -} - -#buffering.hidden { - opacity: 0 -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} \ No newline at end of file diff --git a/app/css/torrent-player.css b/app/css/torrent-player.css new file mode 100644 index 0000000..ce47738 --- /dev/null +++ b/app/css/torrent-player.css @@ -0,0 +1,298 @@ +/* yes these are duplicates with framework */ +.torrent-player { + --download: 0%; + position: absolute; + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + color: #ececec; + user-select: none; + font-family: Roboto, Arial, Helvetica, sans-serif; + z-index: 10; + will-change: width, right, bottom, position, display; + bottom: 2rem; + right: 2rem; + width: 25%; + height: auto; + transition: width 0.2s ease; +} +.torrent-player:target { + bottom: 0; + right: 0; + position: relative; + width: 100%; + height: 100%; + transition: none !important; +} +.torrent-player:target > div { + display: flex; +} +.torrent-player video { + position: relative; + flex: 0 1 auto; + z-index: -1; + width: 100%; + height: 100%; +} +.torrent-player:target video { + position: absolute; +} +.torrent-player a.miniplayer { + z-index: 5; + position: absolute; + width: 100%; + height: 100%; +} +.torrent-player.pip { + background: #000; +} +.torrent-player.pip canvas { + left: 99.9% !important; /*hack to hide the canvas but still keep it updating*/ +} +.torrent-player .material-icons { + font-size: 2.2rem !important; + padding: 1.2rem; + transition: all 0.2s ease; + display: flex; +} +.torrent-player.immersed { + cursor: none; +} +.torrent-player.immersed .top, +.torrent-player.immersed .bottom { + opacity: 0; +} + +.torrent-player:target a.miniplayer, +.torrent-player .bottom input[type='range'][data-name='setProgress'] + img[src=' '], +video[src=''], +.torrent-player.pip video, +.torrent-player .ctrl[disabled], +.torrent-player:fullscreen .ctrl[data-name='toggleTheatre'], +.torrent-player:fullscreen .ctrl[data-name='openPlaylist'], +.torrent-player:fullscreen .ctrl[data-name='togglePopout'] { + display: none !important; +} + +.torrent-player .top { + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.8), + rgba(0, 0, 0, 0.4) 25%, + rgba(0, 0, 0, 0.2) 50%, + rgba(0, 0, 0, 0.1) 75%, + transparent + ); + display: none; + transition: 0.5s opacity ease; + border-width: 0; + border-top-width: 1px; + border-image-slice: 1; + border-style: solid; + border-image-source: linear-gradient( + 90deg, + #e5204c var(--download), + rgba(0, 0, 0, 0.8) var(--download) + ); +} +.torrent-player .top > div { + display: flex; +} +.torrent-player .top span[data-name='peers']::after, +.torrent-player .top span[data-name='downSpeed']::after, +.torrent-player .top span[data-name='upSpeed']::after, +.torrent-player .top div[data-name='nowPlaying'] { + content: attr(data-value); + font-size: 1.8rem !important; + white-space: nowrap; + align-self: center; + font-weight: 600; + font-family: Roboto, Arial, Helvetica, sans-serif; + padding-left: 1.2rem; +} +.torrent-player .top div[data-name='nowPlaying'] { + padding-left: 1.2rem !important; + overflow: hidden; + text-overflow: ellipsis; +} + +.torrent-player .top span[data-name='downloadFile'][disabled] { + display: block !important; + cursor: not-allowed; + color: rgba(255, 255, 255, 0.4); +} + +.torrent-player .middle { + height: 100%; + flex: 1; + display: none; + flex-direction: column; + position: relative; + justify-content: center; + align-items: center; +} +.torrent-player .middle div[data-name='bufferingDisplay'] { + border: 4px solid #ffffff00; + border-top: 4px solid #fff; + border-radius: 50%; + width: 40px; + height: 40px; + animation: spin 1s linear infinite; + opacity: 0; + transition: 0.5s opacity ease; + position: absolute; +} +.torrent-player.buffering .middle div[data-name='bufferingDisplay'] { + opacity: 1 !important; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.torrent-player .bottom { + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.8), + rgba(0, 0, 0, 0.4) 25%, + rgba(0, 0, 0, 0.2) 50%, + rgba(0, 0, 0, 0.1) 75%, + transparent + ); + display: none; + transition: 0.5s opacity ease; +} +.torrent-player .bottom .ctrl:hover { + filter: drop-shadow(0 0 8px #000); +} +.torrent-player .bottom .ctrl { + cursor: pointer; +} + +.torrent-player .bottom input[type='range'] { + -webkit-appearance: none; + background: transparent; + margin: 0; + cursor: pointer; +} +.torrent-player .bottom input[type='range']:focus { + outline: none; +} +.torrent-player .bottom input[type='range']::-webkit-slider-runnable-track { + height: 3px; +} +.torrent-player .bottom input[type='range']::-webkit-slider-thumb { + height: 0; + width: 0; + border-radius: 50%; + background: var(--accent-color); + -webkit-appearance: none; + margin-top: 2px; + transition: all 0.1s ease; +} +.torrent-player .bottom input[type='range']:hover::-webkit-slider-thumb { + height: 12px; + width: 12px; + margin-top: -4px; +} +.torrent-player + .bottom + input[type='range'][data-name='setProgress']::-webkit-slider-runnable-track { + background: linear-gradient( + 90deg, + #e5204c var(--progress), + rgba(255, 255, 255, 0.2) var(--progress) + ); +} +.torrent-player + .bottom + input[type='range'][data-name='setVolume']::-webkit-slider-runnable-track { + background: linear-gradient( + 90deg, + #e5204c var(--volume-level), + rgba(255, 255, 255, 0.2) var(--volume-level) + ); +} + +.torrent-player .bottom .volume { + display: flex; + width: auto; +} + +.torrent-player .bottom .volume:hover input[type='range'] { + width: 5vw; + display: inline-block; + transition: all 0.1s ease; + margin-right: 1rem; +} + +.torrent-player .bottom .volume input[type='range'] { + width: 0; + transition: all 0.1s ease; +} + +.torrent-player .bottom div[data-name='progressWrapper'] { + --progress: 0%; +} +.torrent-player .bottom input[type='range'][data-name='setProgress'], +.torrent-player .bottom div[data-name='progressWrapper'], +.torrent-player .bottom div[data-name='progressWrapper'] div { + display: flex; + width: 100%; + height: 100%; + position: relative; +} + +.torrent-player .bottom input[type='range'][data-name='setProgress'] + img, +.torrent-player .bottom input[type='range'][data-name='setProgress']::before { + pointer-events: none; + opacity: 0; + position: absolute; + transform: translate(-50%, -100%); + font-family: Roboto, Arial, Helvetica, sans-serif; + white-space: nowrap; + align-self: center; + left: var(--progress); + font-weight: 600; + transition: 0.2s opacity ease; +} + +.torrent-player .bottom input[type='range'][data-name='setProgress'] + img { + top: -2rem; + width: 150px; +} + +.torrent-player .bottom input[type='range'][data-name='setProgress']::before { + top: 0.5rem; + content: attr(data-elapsed); + color: #ececec; +} +.torrent-player .bottom input[type='range'][data-name='setProgress']:active + img, +.torrent-player .bottom input[type='range'][data-name='setProgress']:active::before { + opacity: 1; +} + +.torrent-player .bottom div[data-name='progressWrapper']::before, +.torrent-player .bottom div[data-name='progressWrapper']::after { + color: #ececec; + font-size: 1.8rem !important; + white-space: nowrap; + align-self: center; + cursor: default; + line-height: var(--base-line-height); + padding: 0 1.2rem; + font-weight: 600; +} +.torrent-player .bottom div[data-name='progressWrapper']::before { + content: attr(data-elapsed); +} +.torrent-player .bottom div[data-name='progressWrapper']::after { + content: attr(data-remaining); +} diff --git a/app/index.html b/app/index.html index 70e14a8..ffc1fac 100644 --- a/app/index.html +++ b/app/index.html @@ -22,7 +22,7 @@ - + @@ -167,89 +167,84 @@
-
+
- -
-
-
-
-
- - people - - - arrow_downward - - - arrow_upward - -
-
- - get_app - -
+ +
+
-
- -
-
- - play_arrow +
+ + people - - skip_next + + arrow_downward - - playlist_play - -
- - volume_up - - -
-
- -
-
-
-
-
- - -
-
-
- -
-
-
- - picture_in_picture - - - crop_16_9 - - - fullscreen + + arrow_upward
+
+ + get_app + +
+
+
+
+
+
+
+ + play_arrow + + + skip_next + + + playlist_play + +
+ + volume_up + + +
+
+ +
+
+
+
+
+ + +
+
+
+ +
+
+
+ + picture_in_picture + + + crop_16_9 + + + fullscreen +
diff --git a/app/js/player.js b/app/js/player.js index 127a233..5e16841 100644 --- a/app/js/player.js +++ b/app/js/player.js @@ -57,7 +57,7 @@ class TorrentPlayer extends WebTorrent { this.controls.setVolume.addEventListener('input', (e) => this.setVolume(e.target.value)) this.setVolume() - ptoggle.addEventListener('click', () => this.playPause()) // non-tplayer specific // TODO: fix this + this.controls.ppToggle.addEventListener('click', () => this.playPause()) this.oldVolume = undefined this.controls.setProgress.addEventListener('input', (e) => this.setProgress(e.target.value)) @@ -72,7 +72,7 @@ class TorrentPlayer extends WebTorrent { this.player = options.player this.playerWrapper = options.playerWrapper this.player.addEventListener('fullscreenchange', () => this.updateFullscreen()) - ptoggle.addEventListener('dblclick', () => this.toggleFullscreen()) // non-tplayer specific // TODO: fix this + this.controls.ppToggle.addEventListener('dblclick', () => this.toggleFullscreen()) this.subtitleData = { fonts: [], @@ -372,7 +372,7 @@ Style: Default,${options.defaultSSAStyles || 'Roboto Medium,26,&H00FFFFFF,&H0000 nowPlayingDisplay.textContent = `EP ${Number(this.nowPlaying[1])} - ${episodeRx.exec(streamingEpisode.title)[2]}` } else { document.title = `${this.nowPlaying[0].title.userPreferred} - EP ${Number(this.nowPlaying[1])} - Miru` - nowPlayingDisplay.textContent = `EP ${Number(this.nowPlaying[1])}` + this.controls.nowPlaying.textContent = `EP ${Number(this.nowPlaying[1])}` } } if ('mediaSession' in navigator && mediaMetadata) navigator.mediaSession.metadata = mediaMetadata @@ -418,7 +418,7 @@ Style: Default,${options.defaultSSAStyles || 'Roboto Medium,26,&H00FFFFFF,&H0000 interval: undefined, video: undefined } - nowPlayingDisplay.textContent = '' // TODO: fix + this.controls.nowPlaying.textContent = '' this.controls.captionsButton.setAttribute('disabled', '') this.controls.selectCaptions.textContent = '' this.controls.selectAudio.textContent = '' @@ -555,13 +555,11 @@ Style: Default,${options.defaultSSAStyles || 'Roboto Medium,26,&H00FFFFFF,&H0000 } prettyBytes (num) { - const neg = num < 0; const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] - if (neg) num = -num - if (num < 1) return (neg ? '-' : '') + num + ' B' + if (num < 1) return num + ' B' + const units = [' B', ' kB', ' MB', ' GB', ' TB', ' PB', ' EB', ' ZB', ' YB'] const exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1) num = Number((num / Math.pow(1000, exponent)).toFixed(2)) - const unit = units[exponent] - return (neg ? '-' : '') + num + ' ' + unit + return num + units[exponent] } seek (time) { @@ -592,13 +590,13 @@ Style: Default,${options.defaultSSAStyles || 'Roboto Medium,26,&H00FFFFFF,&H0000 if (this.bufferTimeout) { clearTimeout(this.bufferTimeout) this.bufferTimeout = undefined - this.controls.buffering.classList.add('hidden') + this.player.classList.remove('buffering') } } showBuffering () { this.bufferTimeout = setTimeout(() => { - this.controls.buffering.classList.remove('hidden') + this.player.classList.add('buffering') this.resetImmerse() }, 150) }