Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-03-16 13:36:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

questionable CSS optimisations, CSS restructure

Browse source
This commit is contained in:
ThaUnknown 2021-03-29 00:51:06 +02:00
parent 72d46f14fe
commit a29dfdd67a
5 changed files with 381 additions and 378 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/css/misc.css
View file

@ -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%;

289
app/css/player.css
View file

@ -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);
}
}

298
app/css/torrent-player.css Normal file
View file

@ -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);
}

151
app/index.html
View file

@ -22,7 +22,7 @@
<link href="css/halfmoon.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/misc.css" rel="stylesheet">
<link href="css/player.css" rel="stylesheet">
<link href="css/torrent-player.css" rel="stylesheet">
<style id="substyles">
</style>
</head>
@ -167,89 +167,84 @@
</a>
</nav>
<div class="overflow-y-hidden content-wrapper">
<section id="player" class="overflow-hidden">
<section id="player" class="overflow-hidden torrent-player">
<video id="video" src=""></video>
<a href="#player" class="w-full h-full"></a>
<div class="player d-none flex-column justify-content-between w-full h-full">
<div class="stats row">
<div id="nowPlayingDisplay" class="col-4 ts text-truncate">
</div>
<div class="d-flex col-4 justify-content-center">
<span class="ctrl material-icons" id="peers" data-value="0" data-name="peers">
people
</span>
<span class="ctrl material-icons" id="downSpeed" data-value="0 B/s" data-name="downSpeed">
arrow_downward
</span>
<span class="ctrl material-icons" id="upSpeed" data-value="0 B/s" data-name="upSpeed">
arrow_upward
</span>
</div>
<div class="col-4 d-flex justify-content-end">
<span id="dl" class="material-icons pointer ctrl"
title="Wait For File To Fully Download Before Saving To Drive" disabled
data-name="downloadFile">
get_app
</span>
</div>
<a href="#player" class="miniplayer"></a>
<div class="top">
<div data-name="nowPlaying" class="col-4 ctrl">
</div>
<div id="ptoggle" class="h-full d-flex justify-content-center align-items-center">
<div id="buffering" class="hidden ctrl" data-name="buffering">
</div>
</div>
<div class="controls d-flex">
<span class="material-icons ctrl" title="Play/Pause [Space]" id="bpp" data-name="playPause">
play_arrow
<div class="col-4 justify-content-center">
<span class="ctrl material-icons" data-value="0" data-name="peers">
people
</span>
<span class="material-icons ctrl" title="Next [N]" id="bnext" data-name="playNext">
skip_next
<span class="ctrl material-icons" data-value="0 B/s" data-name="downSpeed">
arrow_downward
</span>
<span class="material-icons ctrl" title="Playlist [P]" id="bpl" data-name="openPlaylist">
playlist_play
</span>
<div class="volume">
<span class="material-icons ctrl" title="Mute [M]" id="bmute" data-name="toggleMute">
volume_up
</span>
<input class="ctrl" type="range" value="100" id="volume" step="any" data-name="setVolume">
</div>
<div class="audio-tracks dropdown dropup with-arrow">
<span class="material-icons ctrl" title="Audio Tracks [T]" id="baudio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" disabled data-name="audioButton">
queue_music
</span>
<div class="dropdown-menu dropdown-menu-left ctrl custom-radio p-10 pb-5 text-capitalize"
aria-labelledby="baudio" data-name="selectAudio">
</div>
</div>
<div class="prog ctrl" data-name="progressWrapper" data-elapsed="00:00" data-remaining="00:00">
<div>
<input class="ctrl" type="range" min="0" max="100" value="0" id="progress" step="any"
data-name="setProgress">
<img class="ctrl" data-elapsed="00:00" data-name="thumbnail">
</div>
</div>
<div class="subtitles dropdown dropup with-arrow">
<span class="material-icons ctrl" title="Subtitles [C]" id="bcap" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" disabled data-name="captionsButton">
subtitles
</span>
<div class="dropdown-menu dropdown-menu-right ctrl custom-radio p-10 pb-5 text-capitalize"
aria-labelledby="bcap" data-name="selectCaptions">
</div>
</div>
<span class="material-icons ctrl" title="Popout Window [P]" id="bpip" data-name="togglePopout">
picture_in_picture
</span>
<span class="material-icons ctrl" title="Theatre Mode [T]" id="btheatre"
data-name="toggleTheatre">
crop_16_9
</span>
<span class="material-icons ctrl" title="Fullscreen [F]" id="bfull"
data-name="toggleFullscreen">
fullscreen
<span class="ctrl material-icons" data-value="0 B/s" data-name="upSpeed">
arrow_upward
</span>
</div>
<div class="col-4 justify-content-end">
<span class="material-icons ctrl" title="Wait For File To Fully Download Before Saving To Drive"
disabled data-name="downloadFile">
get_app
</span>
</div>
</div>
<div class="middle ctrl" data-name="ppToggle">
<div data-name="bufferingDisplay">
</div>
</div>
<div class="bottom">
<span class="material-icons ctrl" title="Play/Pause [Space]" data-name="playPause">
play_arrow
</span>
<span class="material-icons ctrl" title="Next [N]" data-name="playNext">
skip_next
</span>
<span class="material-icons ctrl" title="Playlist [P]" data-name="openPlaylist">
playlist_play
</span>
<div class="volume">
<span class="material-icons ctrl" title="Mute [M]" data-name="toggleMute">
volume_up
</span>
<input class="ctrl" type="range" value="100" id="volume" step="any" data-name="setVolume">
</div>
<div class="audio-tracks dropdown dropup with-arrow">
<span class="material-icons ctrl" title="Audio Tracks [T]" id="baudio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" disabled data-name="audioButton">
queue_music
</span>
<div class="dropdown-menu dropdown-menu-left ctrl custom-radio p-10 pb-5 text-capitalize"
aria-labelledby="baudio" data-name="selectAudio">
</div>
</div>
<div class="ctrl" data-name="progressWrapper" data-elapsed="00:00" data-remaining="00:00">
<div>
<input class="ctrl" type="range" min="0" max="100" value="0" step="any"
data-name="setProgress">
<img class="ctrl" data-elapsed="00:00" data-name="thumbnail">
</div>
</div>
<div class="subtitles dropdown dropup with-arrow">
<span class="material-icons ctrl" title="Subtitles [C]" id="bcap" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" disabled data-name="captionsButton">
subtitles
</span>
<div class="dropdown-menu dropdown-menu-right ctrl custom-radio p-10 pb-5 text-capitalize"
aria-labelledby="bcap" data-name="selectCaptions">
</div>
</div>
<span class="material-icons ctrl" title="Popout Window [P]" data-name="togglePopout">
picture_in_picture
</span>
<span class="material-icons ctrl" title="Theatre Mode [T]" data-name="toggleTheatre">
crop_16_9
</span>
<span class="material-icons ctrl" title="Fullscreen [F]" data-name="toggleFullscreen">
fullscreen
</span>
</div>
</section>
<section id="home" class="flex-column overflow-y-auto">

20
app/js/player.js
View file

@ -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)
}