Merge pull request #46 from video-db/add-support-for-message-handler-…

…videos

Add support for message handler videos

src/components/chat/ChatInterface.vue

@@ -207,6 +207,7 @@ import UploadModal from "../modals/UploadModal.vue";
 import DeleteSessionDialog from "../modals/DeleteSessionModal.vue";
 import ChatSearchResults from "../message-handlers/ChatSearchResults.vue";
 import ChatVideo from "../message-handlers/ChatVideo.vue";
+import ChatVideos from "../message-handlers/ChatVideos.vue";
 import ImageHandler from "../message-handlers/ImageHandler.vue";
 import TextResponse from "../message-handlers/TextResponse.vue";
 
@@ -332,6 +333,7 @@ const { chatInput, setChatInput, messageHandlers, registerMessageHandler } =
   useChatInterface();
 
 registerMessageHandler("video", ChatVideo);
+registerMessageHandler("videos", ChatVideos);
 registerMessageHandler("text", TextResponse);
 registerMessageHandler("search_results", ChatSearchResults);
 registerMessageHandler("image", ImageHandler);

src/components/collection/VideoCard.vue

@@ -56,7 +56,7 @@
           ></div>
           <default-thumbnail
             v-else
-            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"
+            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 vdb-c-animate-pulse"
             @click="$emit('video-click', item)"
           />
           <div

src/components/message-handlers/ChatVideos.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="vdb-c-relative vdb-c-flex vdb-c-w-full vdb-c-flex-col vdb-c-gap-8 vdb-c-py-14 vdb-c-text-left"
+  >
+    <LoadingMessage
+      :status="content.status"
+      :message="content.status_message"
+      :is-last-conv="isLastConv"
+    />
+    <transition name="fade" mode="out-in">
+      <div v-if="content.status === 'success' || content.status === 'progress'">
+        <VideoList
+          :video-results="content.videos"
+          @video-click="handleVideoClick"
+        />
+      </div>
+      <div
+        v-else-if="content.status === 'not_generated'"
+        class="vdb-c-flex vdb-c-flex-col"
+      ></div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import {
+  VideoDBPlayer,
+  TimeCode,
+  BigCenterButton,
+  VolumeControlButton,
+  PlayPauseButton,
+  FullScreenButton,
+  ProgressBar,
+} from "@videodb/player-vue";
+import "@videodb/player-vue/dist/style.css";
+import LoadingMessage from "./elements/LoadingMessage.vue";
+import VideoList from "../collection/VideoList.vue";
+import { useVideoDBChat } from "../../context.js";
+
+const { addMessage, loadSession } = useVideoDBChat();
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true,
+  },
+  isLastConv: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isFullScreen = ref(false);
+
+const handleFullScreenChange = () => {
+  isFullScreen.value = !isFullScreen.value;
+  if (isFullScreen.value) {
+    document.documentElement.requestFullscreen();
+  } else {
+    document.exitFullscreen();
+  }
+};
+
+const handleVideoClick = (video) => {
+  if (video.externalUrl) {
+    window.open(video.url, "_blank");
+  } else {
+    handleAddMessage(`@stream_video ${video.name}`);
+  }
+};
+
+const handleAddMessage = (content) => {
+  addMessage({
+    content: [{ type: "text", text: content }],
+  });
+};
+</script>
+
+<style lang="scss">
+.video-js .vjs-big-play-button {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>