Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-15 21:04:46 +01:00
Code Issues Projects Releases Wiki Activity

feature (video): responsive video player

Browse source
This commit is contained in:
MickaelK 2024-11-15 23:09:17 +11:00
parent fb4c6200ba
commit fed2b0f409
2 changed files with 28 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
public/assets/pages/viewerpage/application_video.css
View file

@ -32,16 +32,40 @@ body:not(.dark-mode) .component_videoplayer {
border-radius: 3px;
margin: auto;
position: relative;
width: 800px;
}
.component_videoplayer .video_container .video_screen .video_wrapper {
width: 800px;
height: 450px;
}
@media (max-width: 850px) { .component_videoplayer .video_container .video_screen .video_wrapper { max-width: 600px; }}
@media (max-width: 650px) { .component_videoplayer .video_container .video_screen .video_wrapper { max-width: 500px; max-height: 400px; }}
@media (max-width: 550px) { .component_videoplayer .video_container .video_screen .video_wrapper { max-width: 450px; max-height: 350px; }}
@media (max-width: 500px) { .component_videoplayer .video_container .video_screen .video_wrapper { max-width: 350px; max-height: 300px; }}
@media (max-width: 370px) { .component_videoplayer .video_container .video_screen .video_wrapper { max-width: 250px; max-height: 200px; }}
@media (max-height: 650px) {
.component_videoplayer .video_container .video_screen .video_wrapper { max-width: 600px; height: 420px; }
.component_videoplayer .video_container { padding: 10px 10px 10px 10px; }
}
@media (max-height: 550px) { .component_videoplayer .video_container .video_screen .video_wrapper { height: 330px; }}
@media (max-height: 445px) { .component_videoplayer .video_container .video_screen .video_wrapper { height: 250px; }}
@media (max-height: 370px) { .component_videoplayer .video_container .video_screen .video_wrapper { height: 200px; }}
@media (max-height: 310px) { .component_videoplayer .video_container .video_screen .video_wrapper { height: 100px; }}
.component_videoplayer .video_container .video_screen .loader {
position: absolute;
top: 30%;
top: calc(50% - 85px);
width: 100%;
}
.component_videoplayer .video_container .video_screen .loader > img {
height: 170px;
cursor: pointer;
filter: brightness(0.5) invert(1);
}
@media (max-width: 700px) or (max-height: 650px) {
.component_videoplayer .video_container .video_screen .loader > img { height: 100px; }
.component_videoplayer .video_container .video_screen .loader { top: calc(50% - 60px); }
}
.component_videoplayer .video_container .video_screen.is-casting-yes .videoplayer_control, .component_videoplayer .video_container .video_screen.video-state-pause .videoplayer_control, .component_videoplayer .video_container .video_screen.video-state-buffer .videoplayer_control, .component_videoplayer .video_container .video_screen.video-state-play:hover .videoplayer_control {
opacity: 1;
transition: 0.1s opacity ease;

4
public/assets/pages/viewerpage/application_video.js
View file

@ -28,7 +28,7 @@ export default function(render, { mime }) {
<div class="video_container">
<span>
<div class="video_screen video-state-pause is-casting-no">
<div class="video_wrapper" style="max-height: 819px;">
<div class="video_wrapper">
<video></video>
</div>
<div class="loader no-select">
@ -186,7 +186,7 @@ export default function(render, { mime }) {
)),
rxjs.mergeMap(() => {
const $loader = qs($page, ".loader");
$loader.replaceChildren(createElement(`<img style="height:170px;cursor:pointer;filter:brightness(0.5) invert(1);" src="${ICON.PLAY}" />`));
$loader.replaceChildren(createElement(`<img src="${ICON.PLAY}" />`));
animate($loader, {
time: 150,
keyframes: [