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

Some video player improvements

Browse Source
This commit is contained in:
Fornax
2022-03-01 20:47:15 +01:00
parent 3174439d78
commit 15716f0673
7 changed files with 153 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
svelte/src/file_viewer/viewers/Image.svelte
View File

@@ -85,7 +85,7 @@ const mouseup = (e) => {
top: 50%;
cursor: pointer;
transform: translateY(-50%);
box-shadow: 1px 1px 5px var(--shadow_color);
box-shadow: 1px 1px 6px var(--shadow_color);
}
.image.zoom {
max-width: none;

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

@@ -18,6 +18,7 @@ let file = {
$: loop = file.name.includes(".loop.")
let player
let playing = false
let video_reload = false
let media_session = false
@@ -55,55 +56,152 @@ onMount(() => {
}
})
let download = () => { dispatch("download", {}) }
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 => {
player.fastSeek(player.currentTime + 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
}
}
const fullscreen = () => {
player.requestFullscreen()
}
</script>
<div class="container">
{#if file.allow_video_player}
{#if !video_reload}
<!-- svelte-ignore a11y-media-has-caption -->
<video
bind:this={player}
controls
playsinline
autoplay
loop={loop}
class="center drop_shadow"
on:ended={() => {dispatch("next", {})}}
>
<source src={file.get_href} type={file.mime_type} />
</video>
{/if}
{:else}
<h1>{file.name}</h1>
<img src={file.icon_href} class="video_icon" alt="Video icon">
<TextBlock width="600px">
The online video player on pixeldrain is only available when the
uploader of the file you is a Patreon supporter, or if you are a
Patreon supporter. You can still download the video and watch it
locally on your computer.
<br/>
<button on:click={download}>
<i class="icon">download</i> Download
</button>
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" class="button button_highlight">
<i class="icon">bolt</i> Support Pixeldrain on Patreon
</a>
</TextBlock>
<br/><br/>
<LargeFileMessage file={file}></LargeFileMessage>
{#if file.allow_video_player}
{#if !video_reload}
<div class="container">
<div class="player">
<!-- svelte-ignore a11y-media-has-caption -->
<video
bind:this={player}
controls
playsinline
autoplay
loop={loop}
class="video drop_shadow"
on:pause={() => playing = false }
on:play={() => playing = true }
on:ended={() => dispatch("next", {})}
>
<source src={file.get_href} type={file.mime_type} />
</video>
</div>
<div class="controls">
<div class="spacer"></div>
<button on:click={() => dispatch("prev") }>
<i class="icon">skip_previous</i>
</button>
<button on:click={() => seek_relative(-10)}>
<i class="icon">replay_10</i>
</button>
<button on:click={toggle_play} class="button_highlight">
{#if playing}
<i class="icon">pause</i>
{:else}
<i class="icon">play_arrow</i>
{/if}
</button>
<button on:click={() => seek_relative(10)}>
<i class="icon">forward_10</i>
</button>
<button on:click={() => dispatch("next") }>
<i class="icon">skip_next</i>
</button>
<div style="width: 16px;"></div>
<!-- <input bind:this={video_seeker} on:input={seek} class="seeker" type="range" min="0" max="1000" value="0"> -->
<button on:click={mute} class:button_red={player && player.muted}>
{#if player && player.muted}
<i class="icon">volume_off</i>
{:else}
<i class="icon">volume_up</i>
{/if}
</button>
<!-- <input bind:this={volume_seeker} on:input={volume_seek} class="volume_control" type="range" min="0" max="100" value="100"> -->
<button on:click={fullscreen}>
<i class="icon">fullscreen</i>
</button>
<div class="spacer"></div>
</div>
</div>
{/if}
</div>
{:else}
<h1>{file.name}</h1>
<img src={file.icon_href} class="video_icon" alt="Video icon">
<TextBlock width="600px">
The online video player on pixeldrain is only available when the
uploader of the file you is a Patreon supporter, or if you are a
Patreon supporter. You can still download the video and watch it
locally on your computer.
<br/>
<button on:click={download}>
<i class="icon">download</i> Download
</button>
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" class="button button_highlight">
<i class="icon">bolt</i> Support Pixeldrain on Patreon
</a>
</TextBlock>
<br/><br/>
<LargeFileMessage file={file}></LargeFileMessage>
{/if}
<style>
.container{
display: block;
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.player {
flex: 1 1 auto;
text-align: center;
overflow: hidden;
}
.center {
.controls {
flex: 0 0 auto;
display: flex;
flex-direction: row;
background-color: var(--layer_1_color);
box-shadow: 1px 1px 6px var(--shadow_color);
padding: 0 2px 2px 2px;
align-items: center;
}
.controls > * {
flex: 0 0 auto;
}
.controls > .spacer {
flex: 1 1 auto;
}
/* .controls > .seeker {
flex: 1 1 80%;
}
.controls > .volume_control {
flex: 1 1 20%;
} */
.video {
position: relative;
display: block;
margin: auto;
@@ -111,6 +209,7 @@ let download = () => { dispatch("download", {}) }
max-height: 100%;
top: 50%;
transform: translateY(-50%);
box-shadow: 1px 1px 6px var(--shadow_color);
}
.video_icon {
display: inline-block;