Many fix and improvements

src/views/contents/ContentCard.vue

@@ -1,45 +1,86 @@
-<template>
+<script setup>
 
+import {computed, reactive, onMounted} from 'vue';
+import {time_ago} from "@/internal_time_ago.js";
+import MessageList from "@/views/messages/MessageList.vue";
+import PostMessage from "@/views/messages/PostMessage.vue";
+
+import YoutubePlayer from './YoutubePlayer.vue';
+import ImageViewer from './ImageViewer.vue';
+// import VimeoPlayer from '@/components/VimeoPlayer.vue';
+// import AudioPlayer from '@/components/AudioPlayer.vue';
+// import BlogViewer from '@/components/BlogViewer.vue';
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true,
+  }
+});
+
+const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
+
+
+const messages = reactive([]);
+
+function addMessage(newMessage) {
+  messages.unshift(newMessage)
+}
+
+function getComponent(url) {
+  if (url.includes('youtube.com') || url.includes('youtu.be')) {
+    return YoutubePlayer;
+    // } else if (url.includes('vimeo.com')) {
+    //   return VimeoPlayer;
+  } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
+    return ImageViewer;
+    // } else if (url.match(/\.(mp3|wav|ogg)$/)) {
+    //   return 'AudioPlayer';
+    // } else {
+    //   return 'BlogViewer';
+  }
+}
+
+</script>
+
+<template>
   <div class="shadow-md rounded-lg bg-gray-50">
 
-    <div class="text-lg font-bold">
-      {{ props.content.title }}
-      <span class="text-md-caption">
-      {{ time_ago(props.content.createdAt) }}
+    <v-card
+        outlined
+        tile
+    >
+      <v-card-title>
+        {{ props.content.title }}
+        <span class="text-subtitle-2">
+          {{ time_ago(props.content.createdAt) }}
         </span>
-    </div>
+      </v-card-title>
 
-    <div v-if="props.content.url !== null || props.content.uri !== null"
-         class="h-48 object-cover bg-gray-300 rounded-md">
+      <v-carousel v-if="hasUrls">
 
-      <v-img :src="props.content.url"
-             v-if="!isHttpUrl">
-      </v-img>
+        <v-carousel-item
+            v-for="url in props.content.urls"
+            :key="url"
+        >
+          <component :is="getComponent(url)"
+                     :src="url"
+          ></component>
+        </v-carousel-item>
 
-      <iframe v-if="isHttpUrl"
-              :src="props?.content?.uri"
-              title="YouTube video player"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              referrerpolicy="strict-origin-when-cross-origin"
-              allowfullscreen>
-      </iframe>
+      </v-carousel>
 
-    </div>
+      <v-card-text>
+        {{ props.content.description }}
+      </v-card-text>
 
-
-    <div class="flex flex-row">
-
-      <div>
-        <div class="text-sm text-gray-500">{{ props.content.description }}</div>
-      </div>
-
-      <div>
-        <router-link :to="'content/' + props?.content?.id">
+      <v-card-actions>
+        <router-link :to="'content/' + content.id">
           <div class="bg-blue-500 rounded-lg py-1 px-2">Plus ...</div>
         </router-link>
-      </div>
+      </v-card-actions>
 
-    </div>
+    </v-card>
 
     <div>
 
@@ -58,28 +99,4 @@
 
   </div>
 
-</template>
-
-<script setup>
-
-import {computed, reactive} from 'vue';
-import {time_ago} from "@/internal_time_ago.js";
-import MessageList from "@/views/messages/MessageList.vue";
-import PostMessage from "@/views/messages/PostMessage.vue";
-
-const isHttpUrl = computed(() => props.content?.uri?.startsWith('http'))
-
-const props = defineProps({
-  content: {
-    type: Object,
-    required: true,
-  }
-});
-
-const messages = reactive([]);
-
-function addMessage(newMessage) {
-  messages.unshift(newMessage)
-}
-
-</script>
+</template>