feat(ui): don't show public text for videos

sentriz · Jun 9, 2021 · 12a036e · 12a036e
1 parent ea5c2a0
commit 12a036e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/frontend/api/index.ts b/frontend/api/index.ts
@@ -139,7 +139,10 @@ export interface Block {
   body: string
 }
 
-export type MediaType = 'image' | 'video'
+export enum MediaType {
+  Image = 'image',
+  Video = 'video',
+}
 
 export interface Media {
   id: number

diff --git a/frontend/components/Public.vue b/frontend/components/Public.vue
@@ -1,18 +1,20 @@
 <template>
-  <div class="bg-gray-50 min-h-screen">
-    <div class="container flex flex-col gap-6 p-6 mx-auto">
+  <div class="bg-gray-50 flex items-center min-h-screen">
+    <div class="container p-6 mx-auto space-y-6">
       <!-- block image or loading -->
       <media-background v-show="mediaHave" :hash="media?.hash" class="box p-3">
         <media-highlight controls :hash="media?.hash" class="mx-auto" @loaded="mediaLoaded" />
       </media-background>
       <loading-spinner v-show="!mediaHave" class="bg-gray-100" text="processing image" />
       <!-- block text or loading -->
-      <div v-show="blocks.length" class="box padded font-mono text-sm bg-white">
-        <p v-for="(block, i) in blocks" :key="i">
-          {{ block.body }}
-        </p>
-      </div>
-      <loading-spinner v-show="!blocks.length" class="bg-gray-100" text="processing text" />
+      <template v-if="!isVideo">
+        <div v-show="blocks.length" class="box padded font-mono text-sm bg-white">
+          <p v-for="(block, i) in blocks" :key="i">
+            {{ block.body }}
+          </p>
+        </div>
+        <loading-spinner v-show="!blocks.length" class="bg-gray-100" text="processing text" />
+      </template>
     </div>
   </div>
 </template>
@@ -24,7 +26,7 @@ import LoadingSpinner from './LoadingSpinner.vue'
 
 import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { newSocket } from '../api'
+import { newSocket, MediaType } from '../api'
 import useStore from '../composables/useStore'
 
 const store = useStore()
@@ -36,6 +38,7 @@ const mediaLoaded = () => (mediaHave.value = true)
 
 const media = computed(() => store.getMediaByHash(hash))
 const blocks = computed(() => store.getBlocksByHash(hash))
+const isVideo = computed(() => media.value?.type === MediaType.Video)
 
 const requestMedia = async () => {
   await store.loadMedia(hash)

diff --git a/frontend/components/Search.vue b/frontend/components/Search.vue
@@ -41,8 +41,8 @@ import UploaderFile from './UploaderFile.vue'
 import { watch, computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useDebounce } from '@vueuse/core'
-import { isError, SortOrder, reqDirectories } from '../api'
-import type { PayloadSearch, MediaType } from '../api'
+import { isError, SortOrder, reqDirectories, MediaType } from '../api'
+import type { PayloadSearch } from '../api'
 import useStore from '../composables/useStore'
 import useInfiniteScroll from '../composables/useInfiniteScroll'
 import useLoading from '../composables/useLoading'
@@ -74,8 +74,8 @@ const reqDirOption = ref(reqDirAll)
 
 type Media = { label: string; icon: string; media?: MediaType }
 const reqMediaAny: Media = { label: 'any', icon: 'fas fa-asterisk' }
-const reqMediaImage: Media = { label: 'image', icon: 'fas fa-image', media: 'image' }
-const reqMediaVideo: Media = { label: 'video', icon: 'fas fa-video', media: 'video' }
+const reqMediaImage: Media = { label: 'image', icon: 'fas fa-image', media: MediaType.Image }
+const reqMediaVideo: Media = { label: 'video', icon: 'fas fa-video', media: MediaType.Video }
 const reqMediaOptions = ref([reqMediaAny, reqMediaImage, reqMediaVideo])
 const reqMediaOption = ref(reqMediaAny)