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

5
svelte/src/file_viewer/AdLeaderboard.svelte
View File

@@ -13,14 +13,11 @@ onMount(() => {
return
}
switch (Math.floor(Math.random()*3)) {
switch (Math.floor(Math.random()*2)) {
case 0:
set_ad_type("ads.plus")
break
case 1:
set_ad_type("valueimpression")
break
case 2:
set_ad_type("pixfuture")
break
}

5
svelte/src/file_viewer/AdSkyscraper.svelte
View File

@@ -31,14 +31,11 @@ onMount(() => {
return
}
switch (Math.floor(Math.random()*3)) {
switch (Math.floor(Math.random()*2)) {
case 0:
set_ad_type("ads.plus")
break
case 1:
set_ad_type("valueimpression")
break
case 2:
set_ad_type("pixfuture")
break
}

26
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -411,7 +411,7 @@ const keyboard_event = evt => {
<CustomBanner src={custom_header} border_top={true}></CustomBanner>
<div id="file_preview_window" class="file_preview_window">
<div class="file_preview_row">
<div id="toolbar" class="toolbar" class:toolbar_visible><div><div>
{#if view === "file"}
<FileStats file={file}></FileStats>
@@ -557,7 +557,7 @@ const keyboard_event = evt => {
</div></div></div>
<div bind:this={file_preview_background}
class="file_preview_container"
class="file_preview"
class:checkers={!custom_background}
class:custom_background={!!custom_background}
class:toolbar_visible
@@ -692,34 +692,30 @@ const keyboard_event = evt => {
}
/* File preview area (row 3) */
.file_preview_window {
.file_preview_row {
flex-grow: 1;
flex-shrink: 1;
position: relative;
display: inline-block;
width: auto;
height: auto;
margin: 0;
display: block;
}
.file_preview_container {
.file_preview {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: inline-block;
display: block;
min-height: 100px;
min-width: 100px;
text-align: center;
vertical-align: middle;
transition: left 0.5s, right 0.5s;
overflow: auto;
box-shadow: inset 2px 2px 10px var(--shadow_color);
text-align: center;
box-shadow: inset 1px 1px 8px var(--shadow_color);
border-radius: 16px;
}
.file_preview_container.toolbar_visible { left: 8em; }
.file_preview_container.skyscraper_visible { right: 160px; }
.file_preview_container.custom_background {
.file_preview.toolbar_visible { left: 8em; }
.file_preview.skyscraper_visible { right: 160px; }
.file_preview.custom_background {
background-size: cover;
background-position: center;
background-color: var(--layer_1_color);

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;