first mega PR crazy update, all work

webapp/components/Editor/nodes/Embed.js

@@ -1,6 +1,8 @@
 import { Node } from 'tiptap'
 import pasteRule from '../commands/pasteRule'
 import { compileToFunctions } from 'vue-template-compiler'
+import { mapGetters, mapMutations } from 'vuex'
+import { allowEmbedIframesMutation } from '~/graphql/User.js'
 
 const template = `
   <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">
@@ -8,7 +10,58 @@ const template = `
     <em> {{ dataEmbedUrl }} </em>
   </a>
 `
+
+const templateVideoPreview = `
+<div>
+ 
+  <ds-container width="small">
+    <ds-placeholder>
+      <div style="font-size: 1em"><span style="color:#17b53f">{{embedPublisher}}</span> - <b>@{{ embedAuthor }}</b> </div>
+      <ds-icon
+        name="play-circle"
+        v-if="!showEmbed"
+        style="
+          position: absolute;
+          font-size: 4em; 
+          color:#17b53f;
+          border-radius: 67px;
+          background-color: cornsilk;
+          margin: 80px;
+          opacity: 0.9;
+          z-index: 1"
+      />
+      <div style="height:270px">
+        <ds-section secondary v-if="showOverlay"  style="height: 270px;width:100%;position:absolute;z-index:1">
+          <ds-placeholder>
+            Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ausgetauscht!
+            <ds-button @click="setConfirm">dauerhaft speichern</ds-button>
+            <ds-button size="x-large" @click="allowEmbedTemporar('openIframe', embedHtml)" >jetzt ansehen</ds-button>           
+          </ds-placeholder>
+        </ds-section>
+        <ds-section primary v-if="showchangeEmbedStatus"  style="height: 270px;width:100%;position:absolute;z-index:1">
+          <ds-placeholder>
+            Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ausgetauscht!
+            <ds-button v-if="!this.currentUser.allowEmbedIframes" @click="setConfirm">dauerhaft speichern</ds-button>
+            <ds-button v-if="this.currentUser.allowEmbedIframes" size="x-large" @click="setCancel" >abstellen</ds-button>         
+          </ds-placeholder>
+        </ds-section>
+        <img v-if="!showEmbed"  :src="embedImage" @click="clickPreview"  height="270" width="auto" style="position:absolute" />             
+        <div v-if="showEmbed" v-html="embedHtml" />        
+      </div>      
+      <div style="font-size: 1.5em">{{ embedTitle }}</div>
+      <div style="font-size: 1em">{{ embedDescription }}</div>
+      <div style="font-size: 1em"><a  :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank" ><em> {{ dataEmbedUrl }} </em></a></div>
+      <ds-text v-if="!currentUser.allowEmbedIframes" size="small" align="right" color="softer">
+      automatisches Einbinden <b>abgestellt</b> | <a href="#" @click="modalOpen">ändern</a></ds-text>
+      <ds-text v-else size="small" align="right" color="softer">
+      automatisches Einbinden <b>zugelassen</b> | <a href="#" @click="modalOpen">ändern</a></ds-text>
+    </ds-placeholder>
+  </ds-container>
+</div>
+`
+
 const compiledTemplate = compileToFunctions(template)
+const compiledTemplateVideoPreview = compileToFunctions(templateVideoPreview)
 
 export default class Embed extends Node {
   get name() {
@@ -65,12 +118,22 @@ export default class Embed extends Node {
       props: ['node', 'updateAttrs', 'options'],
       data: () => ({
         embedData: {},
+        showEmbed: true,
+        showOverlay: false,
+        embedcode: null,
+        isOpen: false,
+        showchangeEmbedStatus: false,
+        // allowEmbedIframes: this.currentUser.allowEmbedIframes
       }),
       async created() {
         if (!this.options) return {}
         this.embedData = await this.options.onEmbed({ url: this.dataEmbedUrl })
+        this.showEmbed = this.currentUser.allowEmbedIframes
       },
       computed: {
+        ...mapGetters({
+          currentUser: 'auth/user',
+        }),
         embedClass() {
           return this.embedHtml ? 'embed' : ''
         },
@@ -78,6 +141,26 @@ export default class Embed extends Node {
           const { html = '' } = this.embedData
           return html
         },
+        embedImage() {
+          const { image = '' } = this.embedData
+          return image
+        },
+        embedPublisher() {
+          const { publisher = '' } = this.embedData
+          return publisher
+        },
+        embedTitle() {
+          const { title = '' } = this.embedData
+          return title
+        },
+        embedAuthor() {
+          const { author = '' } = this.embedData
+          return author
+        },
+        embedDescription() {
+          const { description = '' } = this.embedData
+          return description
+        },
         dataEmbedUrl: {
           get() {
             return this.node.attrs.dataEmbedUrl
@@ -89,8 +172,63 @@ export default class Embed extends Node {
           },
         },
       },
+      methods: {
+        ...mapMutations({
+          setCurrentUser: 'auth/SET_USER',
+        }),
+        clickPreview: function(xx, html) {
+          this.showOverlay = true
+        },
+        allowEmbedTemporar: function(xx, html) {
+          if (xx === 'openIframe') {
+            this.embedcode = html
+            this.showEmbed = true
+          } else {
+            this.embedcode = null
+            this.showEmbed = false
+          }
+          this.showOverlay = false
+        },
+        modalOpen: function() {
+          this.showOverlay = false
+          this.showchangeEmbedStatus = true
+        },
+        setConfirm: function() {
+          this.submit(true)
+          this.showOverlay = false
+          this.showchangeEmbedStatus = false
+        },
+        setCancel: function() {
+          this.submit(false)
+          this.showchangeEmbedStatus = false
+        },
+        async submit(allowEmbedIframes) {
+          try {
+            await this.$apollo.mutate({
+              mutation: allowEmbedIframesMutation(),
+              variables: {
+                id: this.currentUser.id,
+                allowEmbedIframes,
+              },
+              update: (store, { data: { UpdateUser } }) => {
+                const { allowEmbedIframes } = UpdateUser
+                this.setCurrentUser({
+                  ...this.currentUser,
+                  allowEmbedIframes,
+                })
+              },
+            })
+            this.$toast.success(this.$t('contribution.success'))
+            this.showEmbed = this.currentUser.allowEmbedIframes
+          } catch (err) {
+            this.$toast.error(err.message)
+          }
+        },
+      },
       render(createElement) {
-        return compiledTemplate.render.call(this, createElement)
+        if (this.embedHtml !== '')
+          return compiledTemplateVideoPreview.render.call(this, createElement)
+        if (this.embedHtml === '') return compiledTemplate.render.call(this, createElement)
       },
     }
   }

webapp/graphql/User.js

@@ -134,3 +134,14 @@ export const unfollowUserMutation = i18n => {
     }
   `
 }
+
+export const allowEmbedIframesMutation = () => {
+  return gql`
+    mutation($id: ID!, $allowEmbedIframes: Boolean) {
+      UpdateUser(id: $id, allowEmbedIframes: $allowEmbedIframes) {
+        id
+        allowEmbedIframes
+      }
+    }
+  `
+}

webapp/pages/settings/allow-embeds.vue

@@ -45,16 +45,9 @@
 
 <script>
 import axios from 'axios'
-import gql from 'graphql-tag'
 import { mapGetters, mapMutations } from 'vuex'
-const mutation = gql`
-  mutation($id: ID!, $allowEmbedIframes: Boolean) {
-    UpdateUser(id: $id, allowEmbedIframes: $allowEmbedIframes) {
-      id
-      allowEmbedIframes
-    }
-  }
-`
+import { allowEmbedIframesMutation } from '~/graphql/User.js'
+
 export default {
   head() {
     return {
@@ -64,7 +57,6 @@ export default {
   computed: {
     ...mapGetters({
       currentUser: 'auth/user',
-      allowEmbedIframes: 'auth/allowEmbedIframes',
     }),
   },
   data() {
@@ -98,7 +90,7 @@ export default {
     async submit() {
       try {
         await this.$apollo.mutate({
-          mutation,
+          mutation: allowEmbedIframesMutation(),
           variables: {
             id: this.currentUser.id,
             allowEmbedIframes: !this.disabled,

webapp/store/auth.js

@@ -6,7 +6,6 @@ export const state = () => {
     user: null,
     token: null,
     pending: false,
-    allowEmbedIframes: false,
   }
 }
 
@@ -47,9 +46,6 @@ export const getters = {
   termsAndConditionsAgreed(state) {
     return state.user && state.user.termsAndConditionsAgreedVersion === VERSION
   },
-  allowEmbedIframes(state) {
-    return state.allowEmbedIframes
-  },
 }
 
 export const actions = {