From db3823eb79350f177f45533eb3d9258fb32c435e Mon Sep 17 00:00:00 2001
From: Alban Costaz <alban.costaz@gmail.com>
Date: Thu, 2 Jan 2025 10:19:42 +0100
Subject: [PATCH] [MS] FileControlsPlayback component

---
 .../viewers/controls/FileControlsPlayback.vue | 30 +++++++++++++++++++
 .../viewers/controls/FileControlsVolume.vue   |  2 +-
 client/src/components/viewers/index.ts        |  2 ++
 client/src/views/viewers/AudioViewer.vue      | 30 +++++--------------
 client/src/views/viewers/VideoViewer.vue      | 22 ++++----------
 client/tests/e2e/specs/file_viewers.spec.ts   |  6 ++--
 6 files changed, 49 insertions(+), 43 deletions(-)
 create mode 100644 client/src/components/viewers/controls/FileControlsPlayback.vue

diff --git a/client/src/components/viewers/controls/FileControlsPlayback.vue b/client/src/components/viewers/controls/FileControlsPlayback.vue
new file mode 100644
index 00000000000..d0276575a4e
--- /dev/null
+++ b/client/src/components/viewers/controls/FileControlsPlayback.vue
@@ -0,0 +1,30 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <file-controls-group>
+    <file-controls-button
+      :class="{ 'flip-horizontal-ion-icon': ended }"
+      :icon="playbackIcon"
+    />
+  </file-controls-group>
+</template>
+
+<script setup lang="ts">
+import { refresh, play, pause } from 'ionicons/icons';
+import { FileControlsButton, FileControlsGroup } from '@/components/viewers';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  ended: boolean;
+  paused: boolean;
+}>();
+
+const playbackIcon = computed((): string => {
+  if (props.ended) {
+    return refresh;
+  }
+  return props.paused ? play : pause;
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/client/src/components/viewers/controls/FileControlsVolume.vue b/client/src/components/viewers/controls/FileControlsVolume.vue
index 1e215271063..309f01e5d25 100644
--- a/client/src/components/viewers/controls/FileControlsVolume.vue
+++ b/client/src/components/viewers/controls/FileControlsVolume.vue
@@ -69,7 +69,7 @@ function getVolumeIcon(): string {
   display: flex;
 
   &-slider {
-    margin-right: 0.5rem;
+    margin-right: 1rem;
     opacity: 1;
     width: 5rem;
     display: flex;
diff --git a/client/src/components/viewers/index.ts b/client/src/components/viewers/index.ts
index 10546f37390..46816f523f4 100644
--- a/client/src/components/viewers/index.ts
+++ b/client/src/components/viewers/index.ts
@@ -5,6 +5,7 @@ import FileControlsButton from '@/components/viewers/controls/FileControlsButton
 import FileControlsGroup from '@/components/viewers/controls/FileControlsGroup.vue';
 import FileControlsInput from '@/components/viewers/controls/FileControlsInput.vue';
 import FileControlsPagination from '@/components/viewers/controls/FileControlsPagination.vue';
+import FileControlsPlayback from '@/components/viewers/controls/FileControlsPlayback.vue';
 import FileControlsVolume from '@/components/viewers/controls/FileControlsVolume.vue';
 import FileControlsZoom from '@/components/viewers/controls/FileControlsZoom.vue';
 
@@ -14,6 +15,7 @@ export {
   FileControlsGroup,
   FileControlsInput,
   FileControlsPagination,
+  FileControlsPlayback,
   FileControlsVolume,
   FileControlsZoom,
 };
diff --git a/client/src/views/viewers/AudioViewer.vue b/client/src/views/viewers/AudioViewer.vue
index 58fc611a599..40b3c1fa547 100644
--- a/client/src/views/viewers/AudioViewer.vue
+++ b/client/src/views/viewers/AudioViewer.vue
@@ -18,12 +18,11 @@
     </template>
     <template #controls>
       <file-controls>
-        <!-- Disabled till we add an illustration in the viewer -->
-        <!-- <file-controls-button
-          :class="{'flip-horizontal-ion-icon': ended}"
-          :icon="getPlaybackIcon()"
+        <file-controls-playback
+          :paused="paused"
+          :ended="ended"
           @click="togglePlayback"
-        /> -->
+        />
         <file-controls-volume @on-volume-change="updateVolume" />
       </file-controls>
     </template>
@@ -31,11 +30,10 @@
 </template>
 
 <script setup lang="ts">
-// import { refresh, play, pause, volumeHigh, volumeLow, volumeMedium, volumeMute } from 'ionicons/icons';
+import { FileControls, FileControlsPlayback, FileControlsVolume } from '@/components/viewers';
 import { onMounted, ref } from 'vue';
 import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
-import { FileControls, FileControlsVolume } from '@/components/viewers';
 
 const props = defineProps<{
   contentInfo: FileContentInfo;
@@ -50,9 +48,9 @@ onMounted(async () => {
   src.value = URL.createObjectURL(new Blob([props.contentInfo.data], { type: props.contentInfo.mimeType }));
 });
 
-// function togglePlayback(): void {
-//   audioElement.value.paused ? audioElement.value.play() : audioElement.value.pause();
-// }
+function togglePlayback(): void {
+  audioElement.value.paused ? audioElement.value.play() : audioElement.value.pause();
+}
 
 function updateMediaData(event: Event): void {
   paused.value = (event.target as HTMLAudioElement).paused;
@@ -62,18 +60,6 @@ function updateMediaData(event: Event): void {
 function updateVolume(value: number): void {
   audioElement.value.volume = value;
 }
-
-// function getPlaybackIcon(): string {
-//   if (ended.value) {
-//     return refresh;
-//   }
-//   switch (paused.value) {
-//     case true:
-//       return play;
-//     case false:
-//       return pause;
-//   }
-// }
 </script>
 
 <style scoped lang="scss"></style>
diff --git a/client/src/views/viewers/VideoViewer.vue b/client/src/views/viewers/VideoViewer.vue
index df430a858b8..46fb29bb504 100644
--- a/client/src/views/viewers/VideoViewer.vue
+++ b/client/src/views/viewers/VideoViewer.vue
@@ -21,9 +21,9 @@
     </template>
     <template #controls>
       <file-controls>
-        <file-controls-button
-          :class="{ 'flip-horizontal-ion-icon': ended }"
-          :icon="getPlaybackIcon()"
+        <file-controls-playback
+          :paused="paused"
+          :ended="ended"
           @click="togglePlayback"
         />
         <file-controls-volume @on-volume-change="updateVolume" />
@@ -37,10 +37,10 @@
 </template>
 
 <script setup lang="ts">
-import { refresh, play, pause, scan } from 'ionicons/icons';
+import { scan } from 'ionicons/icons';
 import { onMounted, ref } from 'vue';
 import { FileContentInfo } from '@/views/viewers/utils';
-import { FileControls, FileControlsButton, FileControlsVolume } from '@/components/viewers';
+import { FileControls, FileControlsButton, FileControlsPlayback, FileControlsVolume } from '@/components/viewers';
 import { FileViewerWrapper } from '@/views/viewers';
 
 const props = defineProps<{
@@ -72,18 +72,6 @@ function updateMediaData(event: Event): void {
   paused.value = (event.target as HTMLVideoElement).paused;
   ended.value = (event.target as HTMLVideoElement).ended;
 }
-
-function getPlaybackIcon(): string {
-  if (ended.value) {
-    return refresh;
-  }
-  switch (paused.value) {
-    case true:
-      return play;
-    case false:
-      return pause;
-  }
-}
 </script>
 
 <style scoped lang="scss">
diff --git a/client/tests/e2e/specs/file_viewers.spec.ts b/client/tests/e2e/specs/file_viewers.spec.ts
index b79f0d694b0..89a584307f4 100644
--- a/client/tests/e2e/specs/file_viewers.spec.ts
+++ b/client/tests/e2e/specs/file_viewers.spec.ts
@@ -131,15 +131,15 @@ msTest('Audio viewer', async ({ documents }) => {
   await expectMedia(audio).toHaveCurrentTime(0.0);
 
   // Volume control
-  const volumeButton = bottomBar.locator('.file-controls-button');
+  const volumeButton = bottomBar.locator('.file-controls-button').nth(1);
   const volumeSlider = bottomBar.locator('.slider');
   await expectMedia(audio).toHaveVolume(1);
   await volumeSlider.click();
-  await expectMedia(audio).toHaveVolume(0.49);
+  await expectMedia(audio).toHaveVolume(0.48);
   await volumeButton.click();
   await expectMedia(audio).toHaveVolume(0);
   await volumeButton.click();
-  await expectMedia(audio).toHaveVolume(0.49);
+  await expectMedia(audio).toHaveVolume(0.48);
 });
 
 msTest('Video viewer', async ({ documents }) => {