[MS] FileControlsPlayback component

Scille · Jan 3, 2025 · edc5a14 · edc5a14
1 parent 84d0007
commit edc5a14
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 38 deletions.
diff --git a/client/src/components/viewers/controls/FileControlsPlayback.vue 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 === false ? pause : play;
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git 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
@@ -6,6 +6,7 @@ import FileControlsFlux from '@/components/viewers/controls/FileControlsFlux.vue
 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';
 
@@ -16,6 +17,7 @@ export {
   FileControlsGroup,
   FileControlsInput,
   FileControlsPagination,
+  FileControlsPlayback,
   FileControlsVolume,
   FileControlsZoom,
 };
diff --git a/client/src/views/viewers/AudioViewer.vue b/client/src/views/viewers/AudioViewer.vue
@@ -23,9 +23,9 @@
         :length="length"
       />
       <file-controls>
-        <file-controls-button
-          :class="{ 'flip-horizontal-ion-icon': ended }"
-          :icon="getPlaybackIcon()"
+        <file-controls-playback
+          :paused="progress.paused"
+          :ended="ended"
           @click="togglePlayback"
         />
         <file-controls-volume @on-volume-change="updateVolume" />
@@ -38,9 +38,8 @@
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
-import { FileControls, FileControlsButton, FileControlsFlux, FileControlsVolume } from '@/components/viewers';
+import { FileControls, FileControlsFlux, FileControlsPlayback, FileControlsVolume } from '@/components/viewers';
 import { SliderState } from 'megashark-lib';
-import { refresh, play, pause } from 'ionicons/icons';
 
 const props = defineProps<{
   contentInfo: FileContentInfo;
@@ -80,7 +79,9 @@ function onTimeUpdate(): void {
 }
 
 function togglePlayback(): void {
-  audioElement.value?.paused ? audioElement.value?.play() : audioElement.value?.pause();
+  if (audioElement.value) {
+    audioElement.value.paused ? audioElement.value.play() : audioElement.value.pause();
+  }
 }
 
 function updateMediaData(event: Event): void {
@@ -96,19 +97,6 @@ function updateVolume(value: number): void {
     audioElement.value.volume = value;
   }
 }
-
-function getPlaybackIcon(): string {
-  if (ended.value) {
-    return refresh;
-  }
-  switch (progress.value.paused) {
-    case true:
-      return play;
-    case false:
-      return pause;
-  }
-  return play;
-}
 </script>
 
 <style scoped lang="scss"></style>
diff --git a/client/src/views/viewers/VideoViewer.vue b/client/src/views/viewers/VideoViewer.vue
@@ -26,9 +26,9 @@
         :length="length"
       />
       <file-controls>
-        <file-controls-button
-          :class="{ 'flip-horizontal-ion-icon': ended }"
-          :icon="getPlaybackIcon()"
+        <file-controls-playback
+          :paused="progress.paused"
+          :ended="ended"
           @click="togglePlayback"
         />
         <file-controls-volume @on-volume-change="updateVolume" />
@@ -42,9 +42,9 @@
 </template>
 
 <script setup lang="ts">
-import { refresh, play, pause, scan } from 'ionicons/icons';
+import { scan } from 'ionicons/icons';
 import { FileContentInfo } from '@/views/viewers/utils';
-import { FileControls, FileControlsButton, FileControlsFlux, FileControlsVolume } from '@/components/viewers';
+import { FileControls, FileControlsButton, FileControlsFlux, FileControlsPlayback, FileControlsVolume } from '@/components/viewers';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { FileViewerWrapper } from '@/views/viewers';
 import { SliderState } from 'megashark-lib';
@@ -109,19 +109,6 @@ function updateMediaData(event: Event): void {
   progress.value.progress = (event.target as HTMLVideoElement).currentTime * 100;
   progress.value.paused = (event.target as HTMLVideoElement).paused;
 }
-
-function getPlaybackIcon(): string {
-  if (ended.value) {
-    return refresh;
-  }
-  switch (progress.value.paused) {
-    case true:
-      return play;
-    case false:
-      return pause;
-  }
-  return play;
-}
 </script>
 
 <style scoped lang="scss">