pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix layout in horizontal video orientation

Browse Source
This commit is contained in:
Fornax
2023-11-15 14:04:48 +01:00
parent 326e77b6bf
commit b53baa32f5
2 changed files with 113 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -62,11 +62,6 @@ const download = () => { dispatch("download", {}) }
const toggle_play = () => playing ? player.pause() : player.play()
// let video_seeker
// const seek = () => {
// player.fastSeek(player.duration * (video_seeker.value/1000))
// }
const seek_relative = delta => {
if (player.fastSeek) {
player.fastSeek(player.currentTime + delta)
@@ -75,17 +70,10 @@ const seek_relative = delta => {
}
}
// let volume_seeker
// const volume_seek = () => {
// player.volume = volume_seeker.value/100
// }
const mute = () => {
if (player.muted) {
// volume_seeker.disabled = false
player.muted = false
} else {
// volume_seeker.disabled = true
player.muted = true
}
}
@@ -111,6 +99,7 @@ const fullscreen = () => {
</div>
{/if}
<div class="player_and_controls">
<div class="player">
<!-- svelte-ignore a11y-media-has-caption -->
<video
@@ -119,7 +108,7 @@ const fullscreen = () => {
playsinline
autoplay
loop={loop}
class="video drop_shadow"
class="video"
on:pause={() => playing = false }
on:play={() => playing = true }
on:ended={() => dispatch("next", {})}
@@ -167,6 +156,7 @@ const fullscreen = () => {
<div class="spacer"></div>
</div>
</div>
</div>
{/if}
{:else}
@@ -202,6 +192,12 @@ h1 {
height: 100%;
width: 100%;
}
.player_and_controls {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.player {
flex: 1 1 auto;
display: flex;
@@ -231,7 +227,7 @@ h1 {
max-height: 100%;
}
@media(max-height: 500px) {
.container {
.player_and_controls {
flex-direction: row;
}
.controls {

15
svelte/src/filesystem/viewers/Video.svelte
View File

@@ -60,10 +60,8 @@ const seek_relative = delta => {
const mute = () => {
if (player.muted) {
// volume_seeker.disabled = false
player.muted = false
} else {
// volume_seeker.disabled = true
player.muted = true
}
}
@@ -85,7 +83,7 @@ const fullscreen = () => {
the video and watching it locally.
</div>
{/if}
<div class="player_and_controls">
<div class="player">
{#if loaded}
<!-- svelte-ignore a11y-media-has-caption -->
@@ -95,7 +93,7 @@ const fullscreen = () => {
playsinline
autoplay
loop={loop}
class="video drop_shadow"
class="video"
on:pause={() => playing = false }
on:play={() => playing = true }
on:ended={() => dispatch("next", {})}
@@ -139,6 +137,7 @@ const fullscreen = () => {
</button>
<div class="spacer"></div>
</div>
</div>
</div>
<style>
@@ -148,6 +147,12 @@ const fullscreen = () => {
height: 100%;
width: 100%;
}
.player_and_controls {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.player {
flex: 1 1 auto;
display: flex;
@@ -177,7 +182,7 @@ const fullscreen = () => {
max-height: 100%;
}
@media(max-height: 500px) {
.container {
.player_and_controls {
flex-direction: row;
}
.controls {