qfix: fix issues with hls player (#8268)

packages/theme/styles/global.scss

@@ -96,6 +96,24 @@
   }
 }
 :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-video-control-background-hover: #d3d3d3a2;

packages/ui/src/components/HlsVideo.svelte

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

plugins/attachment-resources/src/components/AttachmentVideoPreview.svelte

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