diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index 3b7cc795e398ee3e1f84413eb8180ab27081a22e..619ba648bb72f01a44423d2fa94f61bb3e6642e0 100755 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -3377,6 +3377,11 @@ e m b e d b l o c k width: 100% !important; } } + .cw-block-embed-click-wrapper { + background-color: $content-color-20; + border: solid thin $content-color-40; + padding: 1em; + } .cw-block-embed-info { margin-top: 0.5em; } diff --git a/resources/vue/components/courseware/CoursewareEmbedBlock.vue b/resources/vue/components/courseware/CoursewareEmbedBlock.vue index ec8a42599853b3b8c2e22305208ecc79faab08ee..e787f0c00a05ed030c522f0461c49598f8d967ff 100755 --- a/resources/vue/components/courseware/CoursewareEmbedBlock.vue +++ b/resources/vue/components/courseware/CoursewareEmbedBlock.vue @@ -10,7 +10,7 @@ > <template #content> <div v-if="currentTitle !== ''" class="cw-block-title">{{ currentTitle }}</div> - <div v-if="oembedData !== null"> + <div v-if="activated && oembedData !== null"> <div v-if="oembedData.type === 'rich' || oembedData.type === 'video'" v-html="oembedData.html" @@ -26,6 +26,15 @@ <img :src="oembedData.fullsize_url" /> </div> </div> + <div v-else-if="oembedData !== null" class="cw-block-embed-click-wrapper"> + <div v-translate="{provider: oembedData.provider_name}"> + Dieser Inhalt wird von %{provider} bereitgestellt. Es gelten die Datenschutzbestimmungen von %{provider}.<br> + Klicken Sie hier, wenn Sie zustimmen, dass der Inhalt von %{provider} geladen wird. + </div> + <button class="button accept" @click.prevent="activated = true"> + <translate>Inhalt anzeigen</translate> + </button> + </div> <div class="cw-block-embed-info" v-if="oembedData !== null"> <span class="cw-block-embed-title">{{ oembedData.title }}</span> <span class="cw-block-embed-author-name"> @@ -102,6 +111,7 @@ export default { }, data() { return { + activated: false, currentTitle: '', currentSource: '', currentUrl: '',