Browse Source

add embed component for yt, vimeo & dailymotion links

axolotle 2 years ago
parent
commit
e801f60812
2 changed files with 77 additions and 1 deletions
  1. 76 0
      src/components/globals/EmbedVideo.vue
  2. 1 1
      src/components/nodes/NodeViewBody.vue

+ 76 - 0
src/components/globals/EmbedVideo.vue

@@ -0,0 +1,76 @@
+<template>
+  <b-embed
+    :type="item.type"
+    aspect="16by9"
+    :src="item.src"
+    v-bind="item.attrs"
+  />
+</template>
+
+<script>
+export default {
+  name: 'EmbedVideo',
+
+  props: {
+    src: { type: String, required: true }
+  },
+
+  data () {
+    return {
+      types: [
+        {
+          reg: /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/i,
+          url: 'https://www.youtube.com/embed/$5',
+          params: {
+            'picture-in-picture': 1,
+            accelerometer: 1,
+            gyroscope: 1
+          }
+        },
+        {
+          reg: /^.*vimeo.com\/(\d+)($|\/|\b)/i,
+          url: 'https://player.vimeo.com/video/$1',
+          params: {
+            title: 1,
+            byline: 1,
+            portrait: 0
+          }
+        },
+        {
+          reg: /^.*(?:\/video|dai.ly)\/([A-Za-z0-9]+)([^#&?]*).*/i,
+          url: 'https://www.dailymotion.com/embed/video/$1',
+          params: {
+            autoplay: 0
+          }
+        }
+      ]
+    }
+  },
+
+  computed: {
+    embed () {
+      return this.types.find(type => type.reg.exec(this.src))
+    },
+
+    item () {
+      const embed = this.embed
+
+      if (embed) {
+        const query = Object.entries(embed.params).map(entry => entry.join('=')).join('&')
+        const and = embed.url.indexOf('?') >= 0 ? '&' : '?'
+        return {
+          type: 'iframe',
+          src: this.src.replace(embed.reg, embed.url) + and + query,
+          attrs: { allowfullscreen: true }
+        }
+      }
+
+      return {
+        type: 'video',
+        src: this.src,
+        attrs: { controls: true }
+      }
+    }
+  }
+}
+</script>

+ 1 - 1
src/components/nodes/NodeViewBody.vue

@@ -28,7 +28,7 @@
         </div>
 
         <div v-if="node.videos">
-          <video
+          <embed-video
             v-for="video in node.videos" :key="video.url"
             :src="video.url" class="mt-3"
           />