-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve FileViewer components structure & code reusability
- Create a FileViewerWrapper component to wrap the FileViewer and its action bar - Isolate the FileViewerActionBar as a common component - Update all the viewers component to use the new structure - Improve all viewers UI/UX - Add translation for 'opening file'
- Loading branch information
Showing
17 changed files
with
360 additions
and
202 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS --> | ||
|
|
||
| <template> | ||
| <ms-action-bar class="file-viewer-action-bar"> | ||
| <ms-action-bar-button | ||
| v-for="(action, key) in actions" | ||
| :key="key" | ||
| :icon="action.icon" | ||
| @click="action.handler" | ||
| :button-label="action.text" | ||
| /> | ||
| </ms-action-bar> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { MsActionBar, MsActionBarButton, Translatable } from 'megashark-lib'; | ||
|
|
||
| // TODO: add a disabled state to the button (ex: max zoom level). | ||
| // TODO: extract this interface to a separate file. | ||
| interface FileViewerAction { | ||
| icon?: string; | ||
| text?: Translatable; | ||
| handler: () => void; | ||
| } | ||
|
|
||
| defineProps<{ | ||
| actions: Array<FileViewerAction>; | ||
| }>(); | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .file-viewer-action-bar { | ||
| padding: 0.5rem 1rem; | ||
| width: fit-content; | ||
| background: var(--parsec-color-light-primary-100); | ||
| border-radius: 5em; | ||
| box-shadow: var(--parsec-shadow-light); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| // Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS | ||
|
|
||
| import FileViewerActionBar from '@/components/viewers/FileViewerActionBar.vue'; | ||
|
|
||
| export { FileViewerActionBar }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,80 @@ | ||
| <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS --> | ||
|
|
||
| <template> | ||
| <audio | ||
| controls | ||
| v-if="src.length" | ||
| :src="src" | ||
| /> | ||
| <file-viewer-wrapper> | ||
| <template #viewer> | ||
| <audio | ||
| controls | ||
| v-if="src.length" | ||
| ref="audioElement" | ||
| @play="updateMediaData" | ||
| @playing="updateMediaData" | ||
| @canplay="updateMediaData" | ||
| @pause="updateMediaData" | ||
| @volumechange="updateMediaData" | ||
| :src="src" | ||
| /> | ||
| </template> | ||
| <!-- Disabled till we add an illustration in the viewer --> | ||
| <!-- <template #controls> | ||
| <file-viewer-action-bar | ||
| :actions="[ | ||
| { icon: paused ? play : pause, handler: togglePlayback }, | ||
| { icon: getVolumeIcon(), handler: toggleVolume }, | ||
| ]" | ||
| /> | ||
| </template> --> | ||
| </file-viewer-wrapper> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| // import { play, pause, volumeHigh, volumeLow, volumeMedium, volumeMute } from 'ionicons/icons'; | ||
| import { onMounted, ref } from 'vue'; | ||
| import { FileViewerWrapper } from '@/views/viewers'; | ||
| import { FileContentInfo } from '@/views/viewers/utils'; | ||
|
|
||
| const props = defineProps<{ | ||
| contentInfo: FileContentInfo; | ||
| }>(); | ||
|
|
||
| // const VOLUME_LEVELS = [0, 0.25, 0.5, 1]; | ||
|
|
||
| const src = ref(''); | ||
| const audioElement = ref(); | ||
| const paused = ref(true); | ||
| const volume = ref(1); | ||
|
|
||
| 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 toggleVolume(): void { | ||
| // audioElement.value.volume = VOLUME_LEVELS[(VOLUME_LEVELS.indexOf(audioElement.value.volume) + 1) % VOLUME_LEVELS.length]; | ||
| // } | ||
|
|
||
| function updateMediaData(event: Event): void { | ||
| volume.value = (event.target as HTMLAudioElement).volume; | ||
| paused.value = (event.target as HTMLAudioElement).paused; | ||
| } | ||
|
|
||
| // function getVolumeIcon(): string { | ||
| // switch (volume.value) { | ||
| // case 0: | ||
| // return volumeMute; | ||
| // case 0.25: | ||
| // return volumeLow; | ||
| // case 0.5: | ||
| // return volumeMedium; | ||
| // case 1: | ||
| // return volumeHigh; | ||
| // default: | ||
| // return volumeMute; | ||
| // } | ||
| // } | ||
| </script> | ||
|
|
||
| <style scoped lang="scss"></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS --> | ||
|
|
||
| <template> | ||
| <!-- file-viewer wrapper --> | ||
| <div class="file-viewer-wrapper"> | ||
| <slot name="viewer" /> | ||
| </div> | ||
|
|
||
| <!-- file-viewer bottombar --> | ||
| <div class="file-viewer-bottombar"> | ||
| <slot name="controls" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"></script> | ||
|
|
||
| <style scoped lang="scss"> | ||
| .file-viewer-wrapper { | ||
| height: 100%; | ||
| height: -webkit-fill-available; | ||
| height: -moz-available; | ||
| height: stretch; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .file-viewer-bottombar { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 1.5rem; | ||
| } | ||
| </style> |
Oops, something went wrong.