Merge pull request #1 from omgate234/feat/image-audio-ondemand-url

feat: on demand url

Author: omgate234

src/components/chat/ChatInterface.vue

@@ -110,6 +110,8 @@
                   :collection-videos="activeCollectionVideos"
                   :collection-audios="activeCollectionAudios"
                   :collection-images="activeCollectionImages"
+                  :get-image-url="generateImageUrl"
+                  :get-audio-url="generateAudioUrl"
                   @video-click="handleVideoClick"
                   @delete-video="promptDeleteVideo"
                   @delete-audio="promptDeleteAudio"
@@ -436,6 +438,7 @@ const {
   conversations,
   loadSession,
   generateImageUrl,
+  generateAudioUrl,
   uploadMedia,
   createCollection,
   deleteCollection,

src/components/chat/CollectionView.vue

@@ -93,6 +93,8 @@
       <VideoList
         v-if="videos.length > 0"
         :asset-results="filteredAssets"
+        :get-image-url="getImageUrl"
+        :get-audio-url="getAudioUrl"
         @video-click="handleVideoClick"
         @delete-video="emit('delete-video', $event)"
         @delete-image="emit('delete-image', $event)"
@@ -165,6 +167,12 @@ const props = defineProps({
     type: Array,
     default: null,
   },
+  getAudioUrl: {
+    type: Function,
+  },
+  getImageUrl: {
+    type: Function,
+  },
 });
 
 const mediaTypes = [
@@ -252,6 +260,8 @@ const emit = defineEmits([
   "delete-video",
   "delete-audio",
   "delete-image",
+  "get-image-url",
+  "get-audio-url",
 ]);
 
 const videos = computed(() => {

src/components/collection/AudioCard.vue

@@ -25,8 +25,9 @@
             class="thumbnail vdb-c-absolute vdb-c-bottom-0 vdb-c-left-0 vdb-c-right-0 vdb-c-top-0 vdb-c-rounded-lg vdb-c-bg-cover vdb-c-bg-center vdb-c-bg-no-repeat vdb-c-shadow-1"
           />
           <div
+            v-if="url"
             class="center-button transparent-button vdb-c-absolute vdb-c-left-1/2 vdb-c-top-1/2 vdb-c-flex vdb-c-h-48 vdb-c-w-48 -vdb-c-translate-x-1/2 -vdb-c-translate-y-1/2 vdb-c-transform vdb-c-items-center vdb-c-justify-center vdb-c-rounded-full lg:vdb-c-h-56 lg:vdb-c-w-56"
-            @click="playAudio(item.url)"
+            @click="playAudio(url)"
           >
             <PlayIcon class="vdb-c-h-20 vdb-c-w-20" />
           </div>
@@ -63,7 +64,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import DeleteIcon from "../icons/Delete2.vue";
 import PlayIcon from "../icons/play.vue";
 
@@ -72,6 +73,7 @@ import NotificationCenter from "../chat/elements/NotificationCenter.vue";
 import CopyIcon from "../icons/CopyIcon.vue";
 
 const hoveredDeleteIcon = ref(null);
+const url = ref(null);
 
 const props = defineProps({
   item: {
@@ -86,6 +88,19 @@ const props = defineProps({
     type: String,
     default: "default",
   },
+  getAudioUrl: {
+    type: Function,
+  },
+});
+
+onMounted(async () => {
+  if (props.getAudioUrl) {
+    const audioUrl = await props.getAudioUrl(
+      props.item.collection_id,
+      props.item.id,
+    );
+    url.value = audioUrl.url;
+  }
 });
 
 const notificationCenterRef = ref(null);

src/components/collection/ImageCard.vue

@@ -22,10 +22,10 @@
           class="vid-pb vdb-c-relative vdb-c-overflow-hidden vdb-c-rounded-[7px]"
         >
           <div
-            v-if="item.url"
+            v-if="url"
             class="thumbnail vdb-c-absolute vdb-c-bottom-0 vdb-c-left-0 vdb-c-right-0 vdb-c-top-0 vdb-c-h-106 vdb-c-rounded-lg vdb-c-bg-cover vdb-c-bg-center vdb-c-bg-no-repeat vdb-c-shadow-1"
             :style="{
-              backgroundImage: `url('${item.url}')`,
+              backgroundImage: `url('${url}')`,
               backgroundColor: 'transparent',
             }"
           ></div>
@@ -65,13 +65,13 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import NotificationCenter from "../chat/elements/NotificationCenter.vue";
 import CopyIcon from "../icons/CopyIcon.vue";
 import DeleteIcon from "../icons/Delete2.vue";
 
 const hoveredDeleteIcon = ref(null);
-
+const url = ref(null);
 const props = defineProps({
   item: {
     type: Object,
@@ -85,6 +85,19 @@ const props = defineProps({
     type: String,
     default: "default",
   },
+  getImageUrl: {
+    type: Function,
+  },
+});
+
+onMounted(async () => {
+  if (props.getImageUrl) {
+    const imageUrl = await props.getImageUrl(
+      props.item.collection_id,
+      props.item.id,
+    );
+    url.value = imageUrl.url;
+  }
 });
 
 const notificationCenterRef = ref(null);

src/components/collection/VideoList.vue

@@ -32,13 +32,15 @@
           v-else-if="item.type === 'audio'"
           :item="item"
           :index="index"
+          :get-audio-url="getAudioUrl"
           @delete-audio="$emit('delete-audio', $event)"
         />
 
         <ImageCard
           v-else-if="item.type === 'image'"
           :item="item"
           :index="index"
+          :get-image-url="getImageUrl"
           @delete-image="$emit('delete-image', $event)"
         />
       </div>
@@ -102,6 +104,12 @@ const props = defineProps({
     default: 4,
     validator: (value) => value >= 1 && value <= 4,
   },
+  getImageUrl: {
+    type: Function,
+  },
+  getAudioUrl: {
+    type: Function,
+  },
 });
 
 const currentPage = ref(1);

src/components/hooks/useVideoDBAgent.js

@@ -99,6 +99,25 @@ export function useVideoDBAgent(config) {
     }
   };
 
+  const generateAudioUrl = async (collectionId, audioId) => {
+    const res = {};
+    try {
+      const response = await fetch(
+        `${httpUrl}/videodb/collection/${collectionId}/audio/${audioId}/generate_url`,
+      );
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const url = await response.text();
+      res.status = "success";
+      res.url = url;
+    } catch (error) {
+      res.status = "error";
+      res.error = error;
+    }
+    return res;
+  };
+
   const generateImageUrl = async (collectionId, imageId) => {
     const res = {};
     try {
@@ -618,5 +637,6 @@ export function useVideoDBAgent(config) {
     deleteImage,
     uploadMedia,
     generateImageUrl,
+    generateAudioUrl,
   };
 }