107 lines
2.5 KiB
Vue
107 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
class="video-form"
|
|
v-if="!isVimeo && !isYoutube && !isSrf"
|
|
>
|
|
<info-icon class="video-form__help-icon help-text__icon" />
|
|
<p class="video-form__help-description help-text__description">
|
|
Sie können Videos auf <a
|
|
class="video-form__platform-link help-text__link"
|
|
href="https://youtube.com/"
|
|
target="_blank"
|
|
>Youtube</a>
|
|
oder <a
|
|
class="video-form__platform-link help-text__link"
|
|
href="https://vimeo.com/"
|
|
target="_blank"
|
|
>Vimeo</a>
|
|
hochladen und anschliessen einen Link hier einfügen.
|
|
</p>
|
|
|
|
<input
|
|
:value="value.url"
|
|
class="video-form__video-link skillbox-input"
|
|
placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
|
@input="$emit('change-url', $event.target.value, index)"
|
|
>
|
|
</div>
|
|
|
|
<div v-if="isYoutube">
|
|
<youtube-embed :url="value.url" />
|
|
</div>
|
|
<div v-if="isVimeo">
|
|
<vimeo-embed :url="value.url" />
|
|
</div>
|
|
<div v-if="isSrf">
|
|
<srf-embed :url="value.url" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
|
|
import VimeoEmbed from '@/components/videos/VimeoEmbed';
|
|
import SrfEmbed from '@/components/videos/SrfEmbed';
|
|
import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';
|
|
import {defineAsyncComponent} from 'vue';
|
|
const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
|
|
|
|
export default {
|
|
props: ['value', 'index'],
|
|
|
|
components: {
|
|
InfoIcon,
|
|
YoutubeEmbed,
|
|
VimeoEmbed,
|
|
SrfEmbed
|
|
},
|
|
|
|
computed: {
|
|
isYoutube() {
|
|
return isYoutubeUrl(this.value.url);
|
|
},
|
|
isVimeo() {
|
|
return isVimeoUrl(this.value.url);
|
|
},
|
|
isSrf() {
|
|
return isSrfUrl(this.value.url);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_functions.scss";
|
|
|
|
.video-form {
|
|
display: grid;
|
|
grid-auto-rows: auto;
|
|
grid-template-columns: 40px 1fr;
|
|
grid-column-gap: 16px;
|
|
grid-row-gap: 20px;
|
|
align-items: center;
|
|
|
|
&__help-icon {
|
|
|
|
}
|
|
|
|
&__help-description {
|
|
|
|
}
|
|
|
|
&__platform-link {
|
|
font-family: $sans-serif-font-family;
|
|
text-decoration: underline;
|
|
font-weight: $font-weight-regular;
|
|
font-size: toRem(17px);
|
|
}
|
|
|
|
&__video-link {
|
|
grid-column: 1 / span 2;
|
|
width: $modal-input-width
|
|
}
|
|
}
|
|
</style>
|