wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-22 16:27:22 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

qfix: fix issues with hls player (#8268)

Browse Source
This commit is contained in:
Denis Tingaikin 2025-03-19 03:51:14 +03:00 committed by GitHub
parent 83fa1b7876
commit 31bf72bf3b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/theme/styles/global.scss
View File

@ -96,6 +96,24 @@
} }
} }
:root { :root {
.plyr__volume {
position: relative;
}
.plyr__volume input[data-plyr="volume"] {
display: none;
height: 2rem;
position: absolute;
right: -3rem;
top: -1rem;
transform-origin: left;
transform: rotate(-90deg);
}
.plyr__volume:hover input[data-plyr="volume"],
.plyr__volume input[data-plyr="volume"]:hover {
display: block;
}
--plyr-color-main: #ffffff; --plyr-color-main: #ffffff;
--plyr-video-control-background-hover: #d3d3d3a2; --plyr-video-control-background-hover: #d3d3d3a2;

9
packages/ui/src/components/HlsVideo.svelte
View File

@ -34,6 +34,7 @@
if (video === null) { if (video === null) {
return return
} }
if (!HLS.isSupported()) { if (!HLS.isSupported()) {
video.src = src video.src = src
player = new Plyr(video, options) player = new Plyr(video, options)
@ -107,6 +108,9 @@
} }
} }
options.captions = {
active: false
}
options.i18n = { options.i18n = {
qualityLabel: { qualityLabel: {
0: 'Auto' 0: 'Auto'
@ -146,9 +150,8 @@
} }
</script> </script>
<video bind:this={video} width="100%" height="100%" class="plyr" preload={preload ? 'auto' : 'none'} controls> <!-- svelte-ignore a11y-media-has-caption -->
<track kind="captions" label={name ?? ''} /> <video bind:this={video} width="100%" height="100%" preload={preload ? 'auto' : 'none'} controls />
</video>
<style lang="scss"> <style lang="scss">
video { video {

22
plugins/attachment-resources/src/components/AttachmentVideoPreview.svelte
View File

@ -21,11 +21,13 @@
export let value: WithLookup<Attachment> | BlobType export let value: WithLookup<Attachment> | BlobType
export let preload = true export let preload = true
const maxSizeRem = 20 const maxSizeRem = 25
const baseSizeRem = 12 const baseSizeRem = 20
const minSizeRem = 4 const minSizeRem = 10
$: dimensions = getDimensions(value) $: dimensions = getDimensions(value)
$: name = value.name
$: file = value.file
function getDimensions (value: Attachment | BlobType): { width: number, height: number } { function getDimensions (value: Attachment | BlobType): { width: number, height: number } {
const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
@ -61,23 +63,21 @@
</script> </script>
<div class="container" style="width:{toStyle(dimensions.width)}; height:{toStyle(dimensions.height)}"> <div class="container" style="width:{toStyle(dimensions.width)}; height:{toStyle(dimensions.height)}">
{#await getVideoMeta(value.file, value.name) then meta} {#await getVideoMeta(file, name) then meta}
{@const src = getFileUrl(value.file, value.name)} {@const src = getFileUrl(file, name)}
{#if meta?.hls?.source !== undefined} {#if meta?.hls?.source !== undefined}
<HlsVideo {src} {preload} hlsSrc={meta.hls.source} hlsThumbnail={meta.hls.thumbnail} name={value.name} /> <HlsVideo {src} {preload} hlsSrc={meta.hls.source} hlsThumbnail={meta.hls.thumbnail} {name} />
{:else} {:else}
<Video {src} {preload} name={value.name} /> <Video {src} {preload} {name} />
{/if} {/if}
{/await} {/await}
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .container {
max-width: 25rem; min-width: 10rem;
max-height: 25rem; min-height: 10rem;
min-width: 4rem;
min-height: 4rem;
border-radius: 0.75rem; border-radius: 0.75rem;
} }
</style> </style>