feat: upload and display video

Author: farnabaz

src/app/src/components/content/ContentEditorTipTap.vue

@@ -19,6 +19,8 @@ import { tiptapToMDC } from '../../utils/tiptap/tiptapToMdc'
 import { getStandardToolbarItems, getStandardSuggestionItems, standardNuxtUIComponents, computeStandardDragActions, removeLastEmptyParagraph } from '../../utils/tiptap/editor'
 import { Element } from '../../utils/tiptap/extensions/element'
 import { ImagePicker } from '../../utils/tiptap/extensions/image-picker'
+import { VideoPicker } from '../../utils/tiptap/extensions/video-picker'
+import { Video } from '../../utils/tiptap/extensions/video'
 import { Slot } from '../../utils/tiptap/extensions/slot'
 import { Frontmatter } from '../../utils/tiptap/extensions/frontmatter'
 import { CodeBlock } from '../../utils/tiptap/extensions/code-block'
@@ -116,6 +118,12 @@ const customHandlers = computed(() => ({
     isActive: (editor: Editor) => editor.isActive('image-picker'),
     isDisabled: undefined,
   },
+  video: {
+    canExecute: (editor: Editor) => editor.can().insertContent({ type: 'video-picker' }),
+    execute: (editor: Editor) => editor.chain().focus().insertContent({ type: 'video-picker' }),
+    isActive: (editor: Editor) => editor.isActive('video-picker'),
+    isDisabled: undefined,
+  },
   ...Object.fromEntries(
     componentItems.value.map(item => [
       item.kind,
@@ -173,6 +181,8 @@ const toolbarItems = computed(() => getStandardToolbarItems(t))
       :extensions="[
         Frontmatter,
         ImagePicker,
+        VideoPicker,
+        Video,
         Element,
         InlineElement,
         Slot,

src/app/src/components/shared/ModalMediaPicker.vue

@@ -1,26 +1,36 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useStudio } from '../../composables/useStudio'
-import { isImageFile } from '../../utils/file'
+import { isImageFile, isVideoFile } from '../../utils/file'
 import { Image } from '@unpic/vue'
 import type { TreeItem } from '../../types'
 import { StudioFeature } from '../../types'
 
 const { mediaTree, context } = useStudio()
 
-defineProps<{ open: boolean }>()
+const props = defineProps<{ open: boolean, type: 'image' | 'video' }>()
 
 const emit = defineEmits<{
   select: [image: TreeItem]
   cancel: []
 }>()
 
+const isValidFileType = (item: TreeItem) => {
+  if (props.type === 'image') {
+    return isImageFile(item.fsPath)
+  }
+  if (props.type === 'video') {
+    return isVideoFile(item.fsPath)
+  }
+  return false
+}
+
 const imageFiles = computed(() => {
   const images: TreeItem[] = []
 
   const collectImages = (items: TreeItem[]) => {
     for (const item of items) {
-      if (item.type === 'file' && isImageFile(item.fsPath)) {
+      if (item.type === 'file' && isValidFileType(item)) {
         images.push(item)
       }
       if (item.children) {

src/app/src/components/tiptap/extension/TiptapExtensionImagePicker.vue

@@ -51,6 +51,7 @@ const handleCancel = () => {
       :open="isOpen"
       @select="handleImageSelect"
       @cancel="handleCancel"
+      type="image"
     />
   </NodeViewWrapper>
 </template>

src/app/src/components/tiptap/extension/TiptapExtensionVideo.vue

@@ -0,0 +1,25 @@
+<template>
+  <NodeViewWrapper as="div">
+    <div
+      :contenteditable="false"
+      class="relative group rounded-md overflow-hidden"
+      :ui="{ body: { padding: '' } }"
+    >
+      <video
+        :src="props.src"
+        controls
+        class="my-0 w-full"
+      />
+    </div>
+    <NodeViewContent as="span" />
+  </NodeViewWrapper>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { nodeViewProps, NodeViewWrapper, NodeViewContent } from '@tiptap/vue-3'
+
+const nodeProps = defineProps(nodeViewProps)
+
+const props = computed(() => nodeProps.node.attrs?.props || {})
+</script>

src/app/src/components/tiptap/extension/TiptapExtensionVideoPicker.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { NodeViewProps } from '@tiptap/vue-3'
+import { NodeViewWrapper } from '@tiptap/vue-3'
+import { ref } from 'vue'
+import type { TreeItem } from '../../../types'
+import ModalMediaPicker from '../../shared/ModalMediaPicker.vue'
+
+const props = defineProps<NodeViewProps>()
+
+const isOpen = ref(true)
+
+const handleImageSelect = (image: TreeItem) => {
+  const pos = props.getPos()
+
+  if (typeof pos === 'number') {
+    props.editor
+      .chain()
+      .focus()
+      .deleteRange({ from: pos, to: pos + 1 })
+      .insertContent({
+        type: 'video',
+        attrs: {
+          src: image.routePath,
+          props: {
+            src: image.routePath,
+          },
+        },
+      })
+      .run()
+  }
+
+  isOpen.value = false
+}
+
+const handleCancel = () => {
+  const pos = props.getPos()
+
+  if (typeof pos === 'number') {
+    props.editor
+      .chain()
+      .focus()
+      .deleteRange({ from: pos, to: pos + 1 })
+      .run()
+  }
+
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <NodeViewWrapper>
+    <ModalMediaPicker
+      :open="isOpen"
+      @select="handleImageSelect"
+      @cancel="handleCancel"
+      type="video"
+    />
+  </NodeViewWrapper>
+</template>

src/app/src/locales/bg.json

@@ -219,6 +219,7 @@
         "paragraph": "Параграф",
         "insert": "Вмъкване",
         "image": "Изображение",
+        "video": "Видео",
         "horizontalRule": "Хоризонтална линия"
       },
       "drag": {

src/app/src/locales/de.json

@@ -219,6 +219,7 @@
         "paragraph": "Absatz",
         "insert": "Einfügen",
         "image": "Bild",
+        "video": "Video",
         "horizontalRule": "Horizontale Linie"
       },
       "drag": {

src/app/src/locales/en.json

@@ -219,6 +219,7 @@
         "paragraph": "Paragraph",
         "insert": "Insert",
         "image": "Image",
+        "video": "Video",
         "horizontalRule": "Horizontal Rule"
       },
       "drag": {

src/app/src/locales/es.json

@@ -219,6 +219,7 @@
         "paragraph": "Párrafo",
         "insert": "Insertar",
         "image": "Imagen",
+        "video": "Video",
         "horizontalRule": "Regla horizontal"
       },
       "drag": {

src/app/src/locales/fa.json

@@ -219,6 +219,7 @@
         "paragraph": "پاراگراف",
         "insert": "درج",
         "image": "تصویر",
+        "video": "ویدیو",
         "horizontalRule": "خط افقی"
       },
       "drag": {