From e801f608125f032ea69fb4ec93683c85d84ce71f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 7 Mar 2022 17:21:22 +0100
Subject: [PATCH] add embed component for yt, vimeo & dailymotion links

---
 src/components/globals/EmbedVideo.vue | 76 +++++++++++++++++++++++++++
 src/components/nodes/NodeViewBody.vue |  2 +-
 2 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 src/components/globals/EmbedVideo.vue

diff --git a/src/components/globals/EmbedVideo.vue b/src/components/globals/EmbedVideo.vue
new file mode 100644
index 0000000..35a7fb0
--- /dev/null
+++ b/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>
diff --git a/src/components/nodes/NodeViewBody.vue b/src/components/nodes/NodeViewBody.vue
index b20502e..4e3686d 100644
--- a/src/components/nodes/NodeViewBody.vue
+++ b/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"
           />