|
@@ -44,18 +44,26 @@
|
|
|
|
|
|
|
|
|
|
<b-modal
|
|
<b-modal
|
|
- v-if="creation && creation.iframeUrl"
|
|
|
|
|
|
+ v-if="creation && (creation.iframeUrl || creation.mediaItem)"
|
|
:id="'modal-creation' + creation.id"
|
|
:id="'modal-creation' + creation.id"
|
|
class="modal-creation"
|
|
class="modal-creation"
|
|
static hide-footer hide-header
|
|
static hide-footer hide-header
|
|
>
|
|
>
|
|
<template #default="{ hide, visible }">
|
|
<template #default="{ hide, visible }">
|
|
<button-expand expanded @click="hide()" />
|
|
<button-expand expanded @click="hide()" />
|
|
- <iframe
|
|
|
|
- v-if="visible"
|
|
|
|
- :src="creation.iframeUrl"
|
|
|
|
- width="100%" height="100%"
|
|
|
|
- />
|
|
|
|
|
|
+ <template v-if="visible">
|
|
|
|
+ <iframe
|
|
|
|
+ v-if="creation.iframeUrl"
|
|
|
|
+ :src="creation.iframeUrl"
|
|
|
|
+ width="100%" height="100%"
|
|
|
|
+ />
|
|
|
|
+ <component
|
|
|
|
+ v-else-if="creation.mediaItem"
|
|
|
|
+ :is="creation.mediaItem.is"
|
|
|
|
+ :src="creation.mediaItem.url"
|
|
|
|
+ controls
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
</template>
|
|
</template>
|
|
</b-modal>
|
|
</b-modal>
|
|
|
|
|
|
@@ -226,6 +234,7 @@ export default {
|
|
|
|
|
|
&-body {
|
|
&-body {
|
|
padding: 0;
|
|
padding: 0;
|
|
|
|
+ display: flex;
|
|
}
|
|
}
|
|
|
|
|
|
&-backdrop {
|
|
&-backdrop {
|
|
@@ -241,6 +250,16 @@ export default {
|
|
top: 0;
|
|
top: 0;
|
|
right: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ audio {
|
|
|
|
+ width: 80%;
|
|
|
|
+ margin: auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ video {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|