From ad61c7a87ffa11399abbbba00b0a8e6d74e2f1eb Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <aonnikov@hardcoreeng.com>
Date: Fri, 4 Jul 2025 23:11:06 +0700
Subject: [PATCH] UBERF-12172 Video player fixes (#9467)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
---
 packages/hls/src/components/HlsVideo.svelte               | 5 +++++
 .../presentation/src/components/FilePreviewPopup.svelte   | 5 +----
 packages/presentation/src/components/FileTypeIcon.svelte  | 8 ++++----
 packages/presentation/src/filetypes.ts                    | 4 ++--
 packages/ui/src/components/Video.svelte                   | 5 +++++
 .../src/components/viewer/VideoViewer.svelte              | 3 ++-
 tests/sanity/tests/documents/documents-content.spec.ts    | 5 ++---
 .../sanity/tests/model/documents/document-content-page.ts | 1 +
 8 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/hls/src/components/HlsVideo.svelte b/packages/hls/src/components/HlsVideo.svelte
index c140ac4519..8f4126c42b 100644
--- a/packages/hls/src/components/HlsVideo.svelte
+++ b/packages/hls/src/components/HlsVideo.svelte
@@ -58,6 +58,8 @@
   }
 
   const options: Plyr.Options = {
+    tooltips: { controls: true, seek: true },
+    keyboard: { focused: true, global: true },
     controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen']
   }
 
@@ -171,6 +173,7 @@
 
 <style lang="scss">
   video {
+    background: inherit;
     border-radius: inherit;
     object-fit: contain;
   }
@@ -185,9 +188,11 @@
 
   @import 'plyr/dist/plyr.css';
   :global(.plyr) {
+    flex: 1;
     min-width: 10rem;
     --plyr-control-spacing: 0.5rem;
     --plyr-control-icon-size: 1rem;
+    --plyr-video-background: transparent;
   }
 
   // Hide controls when video is stopped and not hovered
diff --git a/packages/presentation/src/components/FilePreviewPopup.svelte b/packages/presentation/src/components/FilePreviewPopup.svelte
index b452093b36..6c2609133d 100644
--- a/packages/presentation/src/components/FilePreviewPopup.svelte
+++ b/packages/presentation/src/components/FilePreviewPopup.svelte
@@ -69,9 +69,6 @@
   }
 
   onMount(() => {
-    if (fullSize) {
-      dispatch('fullsize')
-    }
     if (props.drawingAvailable === true) {
       if (props.createDrawing !== undefined) {
         createDrawing = props.createDrawing
@@ -126,11 +123,11 @@
 
 <ActionContext context={{ mode: 'browser' }} />
 <Dialog
-  isFullSize
   on:fullsize
   on:close={() => {
     dispatch('close')
   }}
+  padding="0.5rem"
 >
   <svelte:fragment slot="title">
     <div class="antiTitle icon-wrapper">
diff --git a/packages/presentation/src/components/FileTypeIcon.svelte b/packages/presentation/src/components/FileTypeIcon.svelte
index 142b65a2fc..47688ed43d 100644
--- a/packages/presentation/src/components/FileTypeIcon.svelte
+++ b/packages/presentation/src/components/FileTypeIcon.svelte
@@ -30,13 +30,13 @@
   .icon {
     position: relative;
     flex-shrink: 0;
-    width: 2rem;
-    height: 2rem;
+    width: 1.5rem;
+    height: 1.5rem;
     font-weight: 500;
-    font-size: 0.625rem;
+    font-size: 0.5rem;
     color: var(--primary-button-color);
     background-color: var(--primary-button-default);
     border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 0.5rem;
+    border-radius: 0.375rem;
   }
 </style>
diff --git a/packages/presentation/src/filetypes.ts b/packages/presentation/src/filetypes.ts
index 44a3196b7f..7a5d4543fa 100644
--- a/packages/presentation/src/filetypes.ts
+++ b/packages/presentation/src/filetypes.ts
@@ -95,9 +95,9 @@ export async function getPreviewType (
  */
 export function getPreviewAlignment (contentType: string): PopupAlignment {
   if (contentType.startsWith('image/')) {
-    return 'centered'
+    return 'full-centered'
   } else if (contentType.startsWith('video/')) {
-    return 'centered'
+    return 'full-centered'
   } else {
     return 'float'
   }
diff --git a/packages/ui/src/components/Video.svelte b/packages/ui/src/components/Video.svelte
index ffc308bea8..84eacc454c 100644
--- a/packages/ui/src/components/Video.svelte
+++ b/packages/ui/src/components/Video.svelte
@@ -24,6 +24,8 @@
   let player: Plyr | null = null
 
   const options: Plyr.Options = {
+    tooltips: { controls: true, seek: true },
+    keyboard: { focused: true, global: true },
     controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen']
   }
 
@@ -44,6 +46,7 @@
 
 <style lang="scss">
   video {
+    background: inherit;
     border-radius: inherit;
     object-fit: contain;
   }
@@ -58,9 +61,11 @@
 
   @import 'plyr/dist/plyr.css';
   :global(.plyr) {
+    flex: 1;
     min-width: 10rem;
     --plyr-control-spacing: 0.5rem;
     --plyr-control-icon-size: 1rem;
+    --plyr-video-background: transparent;
   }
 
   // Hide controls when video is stopped and not hovered
diff --git a/plugins/view-resources/src/components/viewer/VideoViewer.svelte b/plugins/view-resources/src/components/viewer/VideoViewer.svelte
index 34a0e86d08..e355418fa4 100644
--- a/plugins/view-resources/src/components/viewer/VideoViewer.svelte
+++ b/plugins/view-resources/src/components/viewer/VideoViewer.svelte
@@ -33,7 +33,8 @@
 </script>
 
 <div
-  style:aspect-ratio={aspectRatio}
+  class="flex justify-center w-full"
+  style:aspect-ratio={fit ? undefined : aspectRatio}
   style:max-width={fit ? '100%' : maxWidth}
   style:max-height={fit ? '100%' : maxHeight}
 >
diff --git a/tests/sanity/tests/documents/documents-content.spec.ts b/tests/sanity/tests/documents/documents-content.spec.ts
index fe0fd4c2cc..47010a9312 100644
--- a/tests/sanity/tests/documents/documents-content.spec.ts
+++ b/tests/sanity/tests/documents/documents-content.spec.ts
@@ -201,11 +201,10 @@ test.describe('Content in the Documents tests', () => {
       await test.step('User can open image on current page', async () => {
         await documentContentPage.clickImageFullscreenButton()
         await expect(documentContentPage.imageInPopup()).toBeVisible()
-        await documentContentPage.fullscreenButton().click()
-        await expect(documentContentPage.fullscreenImage()).toBeVisible()
+        await expect(documentContentPage.image()).toBeVisible()
         await expect(async () => {
           await documentContentPage.page.keyboard.press('Escape')
-          await expect(documentContentPage.fullscreenImage()).toBeHidden()
+          await expect(documentContentPage.image()).toBeHidden()
           await expect(documentContentPage.imageInPopup()).toBeHidden()
         }).toPass(retryOptions)
       })
diff --git a/tests/sanity/tests/model/documents/document-content-page.ts b/tests/sanity/tests/model/documents/document-content-page.ts
index 1bc4e83d7d..da8de4c4e8 100644
--- a/tests/sanity/tests/model/documents/document-content-page.ts
+++ b/tests/sanity/tests/model/documents/document-content-page.ts
@@ -22,6 +22,7 @@ export class DocumentContentPage extends CommonPage {
   readonly firstImageInDocument = (): Locator => this.page.locator('.textInput .text-editor-image-container img')
   readonly tooltipImageTools = (): Locator => this.page.locator('.tippy-box')
 
+  readonly image = (): Locator => this.page.locator('.popup img')
   readonly fullscreenImage = (): Locator => this.page.locator('.popup.fullsize img')
   readonly fullscreenButton = (): Locator => this.page.locator('.popup #btnDialogFullScreen')
   readonly imageInPopup = (): Locator => this.page.locator('.popup img')