From 68b07d595d5cf9e73291cda89b78b21279d4be4f 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 | 34 +++++++++++++++++++
 client/src/components/viewers/index.ts        | 11 +++++-
 client/src/views/viewers/AudioViewer.vue      | 22 +++---------
 client/src/views/viewers/VideoViewer.vue      | 22 +++---------
 4 files changed, 54 insertions(+), 35 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..a9b184ac69a
--- /dev/null
+++ b/client/src/components/viewers/controls/FileControlsPlayback.vue
@@ -0,0 +1,34 @@
+<!-- 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="getPlaybackIcon()"
+    />
+  </file-controls-group>
+</template>
+
+<script setup lang="ts">
+import { refresh, play, pause } from 'ionicons/icons';
+import { FileControlsButton, FileControlsGroup } from '@/components/viewers';
+
+const props = defineProps<{
+  ended: boolean;
+  paused: boolean;
+}>();
+
+function getPlaybackIcon(): string {
+  if (props.ended) {
+    return refresh;
+  }
+  switch (props.paused) {
+    case true:
+      return play;
+    case false:
+      return pause;
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/client/src/components/viewers/index.ts b/client/src/components/viewers/index.ts
index a38b3657d65..f743ffc0881 100644
--- a/client/src/components/viewers/index.ts
+++ b/client/src/components/viewers/index.ts
@@ -5,6 +5,15 @@ 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 FileControlsZoom from '@/components/viewers/controls/FileControlsZoom.vue';
 
-export { FileControls, FileControlsButton, FileControlsGroup, FileControlsInput, FileControlsPagination, FileControlsZoom };
+export {
+  FileControls,
+  FileControlsButton,
+  FileControlsGroup,
+  FileControlsInput,
+  FileControlsPagination,
+  FileControlsPlayback,
+  FileControlsZoom,
+};
diff --git a/client/src/views/viewers/AudioViewer.vue b/client/src/views/viewers/AudioViewer.vue
index 5f5a7906042..d272767526f 100644
--- a/client/src/views/viewers/AudioViewer.vue
+++ b/client/src/views/viewers/AudioViewer.vue
@@ -19,9 +19,9 @@
     <!-- Disabled till we add an illustration in the viewer -->
     <!-- <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-button
@@ -34,11 +34,11 @@
 </template>
 
 <script setup lang="ts">
-// import { refresh, play, pause, volumeHigh, volumeLow, volumeMedium, volumeMute } from 'ionicons/icons';
+// import { volumeHigh, volumeLow, volumeMedium, volumeMute } from 'ionicons/icons';
+// import { FileControls, FileControlsPlayback, FileControlsButton } from '@/components/viewers';
 import { onMounted, ref } from 'vue';
 import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
-
 const props = defineProps<{
   contentInfo: FileContentInfo;
 }>();
@@ -83,18 +83,6 @@ function updateMediaData(event: Event): void {
 //       return volumeMute;
 //   }
 // }
-
-// 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 2e394566180..dc03967c742 100644
--- a/client/src/views/viewers/VideoViewer.vue
+++ b/client/src/views/viewers/VideoViewer.vue
@@ -22,9 +22,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-button
@@ -41,10 +41,10 @@
 </template>
 
 <script setup lang="ts">
-import { refresh, play, pause, volumeHigh, volumeLow, volumeMedium, volumeMute, scan } from 'ionicons/icons';
+import { volumeHigh, volumeLow, volumeMedium, volumeMute, scan } from 'ionicons/icons';
 import { onMounted, ref } from 'vue';
 import { FileContentInfo } from '@/views/viewers/utils';
-import { FileControls, FileControlsButton } from '@/components/viewers';
+import { FileControls, FileControlsButton, FileControlsPlayback } from '@/components/viewers';
 import { FileViewerWrapper } from '@/views/viewers';
 
 const props = defineProps<{
@@ -95,18 +95,6 @@ function getVolumeIcon(): string {
       return volumeMute;
   }
 }
-
-function getPlaybackIcon(): string {
-  if (ended.value) {
-    return refresh;
-  }
-  switch (paused.value) {
-    case true:
-      return play;
-    case false:
-      return pause;
-  }
-}
 </script>
 
 <style scoped lang="scss">