feat(service): Add settings for Youbube, such as autoplay. (close #33)

run.sh

@@ -24,7 +24,7 @@ mode=$2
 
 if [ -z "$mode" ]
 then
-  mode="pwa"
+  mode="spa"
 fi
 
 

src/components/views/OEmbedView.vue

@@ -29,7 +29,22 @@
       <q-btn-dropdown dropdown-icon="more_vert" split flat @click="onConfirm">
         <span class="text-blue" slot="label">{{$o.lang.label.submit}}</span>
         <q-list style="min-width: 120px;">
-          <o-common-item icon="settings" :label="$o.lang.label.settings" v-if="false" />
+          <o-common-item icon="settings" :label="$o.lang.label.settings" v-if="service.settings">
+            <q-menu ref="imgRef" anchor="top right" self="top left" content-class="o-menu o-embed-settings-menu">
+              <section class="q-px-md q-pb-sm" style="min-width: 300px">
+                <div class="row justify-between items-center text-bold q-py-sm">
+                  <div>
+                    {{service.label}} {{$o.lang.label.settings}}
+                  </div>
+                  <div><q-btn icon="close" size="0.7rem" flat dense @click="$refs.imgRef.hide()" /></div>
+                </div>
+                <q-separator />
+                <div class="row col-12 items-start q-py-md">
+                  <q-toggle v-model="autoplayToggle" label="Autoplay" @input="onAutoplaySet" />
+                </div>
+              </section>
+            </q-menu>
+          </o-common-item>
           <o-common-item icon="delete" :label="$o.lang.label.remove" @click.native="onDelete" />
           <o-common-item icon="help_outline" :label="$o.lang.label.help" @click.native="onHelp" />
         </q-list>
@@ -57,11 +72,14 @@
 import OBlockCard from 'src/components/common/OBlockCard'
 import OCommonItem from 'src/components/common/OCommonItem'
 import { getEmbedService, getServiceSrc, EmbedServiceLink } from 'src/data/embed'
+import { updateQueryStringItem } from 'src/utils/uri'
+
 export default {
   name: 'o-embed',
   data () {
     return {
       originalLink: '',
+      autoplayToggle: false,
       fullScreen: false,
       loading: true
     }
@@ -95,7 +113,21 @@ export default {
 
       this.originalLink = result.originalLink
       this.link = result.originalLink
-      this.src = result.src
+      this.src = this.buildSrc(result.src)
+
+      console.log('src', this.src)
+    },
+    buildSrc (src) {
+      switch (this.service.value) {
+        case 'youtube':
+          src = updateQueryStringItem(src, 'autoplay', this.autoplay)
+          break
+      }
+      return src
+    },
+    onAutoplaySet () {
+      this.autoplay = this.autoplayToggle ? '1' : '0'
+      this.src = updateQueryStringItem(this.src, 'autoplay', this.autoplay)
     },
     onDelete () {
       let tr = this.view.state.tr
@@ -147,6 +179,16 @@ export default {
           height
         })
       }
+    },
+    autoplay: {
+      get () {
+        return this.node.attrs.autoplay
+      },
+      set (autoplay) {
+        this.updateAttrs({
+          autoplay
+        })
+      }
     }
   },
   mounted () {
@@ -161,6 +203,8 @@ export default {
     if (this.service.value === 'amap') {
       this.loading = false
     }
+
+    this.autoplayToggle = (this.autoplay === '1')
   }
 }
 </script>

src/data/embed.js

@@ -6,7 +6,7 @@
  * @date 2020.04.29
  */
 export const VideoServices = [
-  { label: 'Youtube', value: 'youtube', icon: 'mdi-youtube', color: 'red' },
+  { label: 'Youtube', value: 'youtube', icon: 'mdi-youtube', color: 'red', settings: { autoplay: true } },
   // { label: 'Vimeo', value: 'vimeo', icon: 'mdi-vimeo', color: 'green' },
   // { label: 'Netflix', value: 'netflix', icon: 'mdi-netflix', color: 'red' },
   { label: 'Youku', value: 'youku', icon: '', svgIcon: 'youku', color: 'blue' },

src/extentions/Embed.js

@@ -13,12 +13,14 @@ function getAttrs (dom) {
   const height = dom.getAttribute('data-height') || 500
   const service = dom.getAttribute('data-service') || 'iframe'
   const link = decodeURIComponent(dom.getAttribute('data-link') || '')
+  const autoplay = dom.getAttribute('data-autoplay') || ''
 
   return {
     src,
     height,
     service,
-    link
+    link,
+    autoplay
   }
 }
 
@@ -28,6 +30,7 @@ function toDOM (node) {
     height,
     service,
     link,
+    autoplay,
   } = node.attrs
 
   const attrs = {}
@@ -40,10 +43,14 @@ function toDOM (node) {
   if (link) {
     attrs['data-link'] = encodeURIComponent(link)
   }
+  if (autoplay) {
+    attrs['data-autoplay'] = autoplay
+  }
 
   attrs.src = src
   attrs.frameborder = 0
   attrs.allowfullscreen = true
+  attrs.autoplay = autoplay
 
   return ['oembed', attrs]
 }
@@ -67,6 +74,9 @@ export default class Embed extends Node {
         },
         link: {
           default: null
+        },
+        autoplay: {
+          default: null
         }
       },
       group: 'block',

src/utils/uri.js

@@ -0,0 +1,36 @@
+/**
+ * Uri utils
+ *
+ * @author Xman
+ * @date 2019.10.17
+ */
+
+/**
+ * 获取指定参数的值
+ */
+export const getQueryStringItem = (uri, key) => {
+  let reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)')
+  let str = uri.substr(uri.indexOf('?') + 1)
+  let r = str.match(reg)
+  if (r != null) {
+    return unescape(r[2])
+  } else {
+    return null
+  }
+}
+
+/**
+ * 更新指定参数的值
+ */
+export const updateQueryStringItem = (uri, key, value) => {
+  if (!uri || !value) {
+    return uri
+  }
+  let re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i')
+  let separator = uri.indexOf('?') !== -1 ? '&' : '?'
+  if (uri.match(re)) {
+    return uri.replace(re, '$1' + key + '=' + value + '$2')
+  } else {
+    return uri + separator + key + '=' + value
+  }
+}