UBERF-12172 Video player fixes (#9467)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

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

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">

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>

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'
   }

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

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}
 >

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)
       })

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')