https://www.thedrum.com/assets/812.b4ec4bf9.js

1(self.webpackChunkcarnyx_the_drum=self.webpackChunkcarnyx_the_drum||[]).push([[812],{38178:(e,t,i)=>{var o={"./image.svg":74143,"./video.svg":74348};function a(e){var t=l(e);return i(t)}function l(e){if(!i.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return o[e]}a.keys=function(){return Object.keys(o)},a.resolve=l,e.exports=a,a.id=38178},79763:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>b});var o=i(5166);const a={key:0,class:"td-form__media"};const l={class:"td-editor__media__type-selector__type"},d=["src"],n=(0,o.createElementVNode)("p",{class:"td-editor__media__type-selector__type__title"},"Upload Image",-1),r=(0,o.createElementVNode)("p",{class:"td-editor__media__type-selector__type__copy"}," We recommend a 2:1 landscape ratio and ideal spec is 1080x540 pixels, max 1MB file size ",-1),s={class:"td-editor__media__type-selector__type"},c=["src"],m=(0,o.createElementVNode)("p",{class:"td-editor__media__type-selector__type__title"},"Add Video",-1),p=(0,o.createElementVNode)("p",{class:"td-editor__media__type-selector__type__copy"},"You can add a video by entering the URL",-1);var u=i(41489);const _=i.p+"images/image-icon.55f9787b.svg",h=i.p+"images/video-icon.808dd84b.svg",f={components:{CardBase:u.Z},props:{isModal:{type:Boolean,default:!1}},emits:["type-selected"],data:()=>({imageIcon:_,videoIcon:h}),methods:{onMediaTypeClick(e){this.$emit("type-selected",e)}}};var v=i(83744);const y=(0,v.Z)(f,[["render",function(e,t,i,a,u,_){const h=(0,o.resolveComponent)("CardBase");return(0,o.openBlock)(),(0,o.createElementBlock)("div",{class:(0,o.normalizeClass)(["td-editor__media__type-selector",{"td-editor__media__type-selector--modal":i.isModal}])},[(0,o.createElementVNode)("div",l,[(0,o.createVNode)(h,{elevation:0,onClick:t[0]||(t[0]=()=>_.onMediaTypeClick("image"))},{cardImage:(0,o.withCtx)((()=>[(0,o.createElementVNode)("img",{class:"td-editor__media__type-selector__type__icon",src:u.imageIcon,alt:""},null,8,d),n])),cardContent:(0,o.withCtx)((()=>[r])),_:1})]),(0,o.createElementVNode)("div",s,[(0,o.createVNode)(h,{elevation:0,onClick:t[1]||(t[1]=()=>_.onMediaTypeClick("video"))},{cardImage:(0,o.withCtx)((()=>[(0,o.createElementVNode)("img",{class:"td-editor__media__type-selector__type__icon",src:u.videoIcon,alt:""},null,8,c),m])),cardContent:(0,o.withCtx)((()=>[p])),_:1})]),(0,o.createCommentVNode)(' <div class="td-editor__media__type-selector__type">\n      <CardBase :elevation="0" @click="() => onMediaTypeClick(\'audio\')">\n        <template #cardImage>\n          <img class="td-editor__media__type-selector__type__icon" :src="audioIcon" alt="" />\n          <p class="td-editor__media__type-selector__type__title">Add Podcast</p>\n        </template>\n\n        <template #cardContent>\n          <p class="td-editor__media__type-selector__type__copy">You can add an audio podcast by entering the URL</p>\n        </template>\n      </CardBase>\n    </div> ')],2)}]]);var C=i(9210),k=i(51875);const g={components:{MediaTypeSelector:y,ImageUploadField:C.default,VideoUploadField:k.default},inheritAttrs:!1,data(){return{loading:!0,localFields:this.$attrs.fields,mediaType:null,fieldForceActive:!1}},computed:{showImageField(){return e=>"image"===this.mediaType&&"image"===e.type},showVideoField(){return e=>"video"===this.mediaType&&"video"===e.type}},beforeMount(){this.$attrs.value?.mediaType?this.applyValues():this.loading=!1},methods:{applyValues(){const e=this.$attrs.value.mediaType;this.localFields=this.localFields.map((t=>t.type!==e?t:{...t,fields:t.fields.map((e=>{const t=this.$attrs.value[e.label]||e.value||"";return{...e,value:t}}))})),this.mediaType=e,this.loading=!1},onMediaTypeSelected(e){this.mediaType=e,this.fieldForceActive=!0},onDeleteMedia(){this.mediaType=null,this.fieldForceActive=!1},onFieldClose(){this.fieldForceActive=!1}}},b=(0,v.Z)(g,[["render",function(e,t,i,l,d,n){const r=(0,o.resolveComponent)("MediaTypeSelector"),s=(0,o.resolveComponent)("ImageUploadField"),c=(0,o.resolveComponent)("VideoUploadField");return d.loading?(0,o.createCommentVNode)("v-if",!0):((0,o.openBlock)(),(0,o.createElementBlock)("div",a,[d.mediaType?(0,o.createCommentVNode)("v-if",!0):((0,o.openBlock)(),(0,o.createBlock)(r,{key:0,isModal:!0,onTypeSelected:n.onMediaTypeSelected},null,8,["onTypeSelected"])),((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(d.localFields,((t,i)=>((0,o.openBlock)(),(0,o.createElementBlock)(o.Fragment,{key:i},["image"===t.type?(0,o.withDirectives)(((0,o.openBlock)(),(0,o.createBlock)(s,(0,o.mergeProps)({key:0},{...e.$props,...e.$attrs,...t,attr:{...t.attr,...e.$attrs.attr}},{forceActive:d.fieldForceActive&&n.showImageField(t),forceDisabled:!d.mediaType||"video"===d.mediaType,onDelete:n.onDeleteMedia,onClose:n.onFieldClose}),null,16,["forceActive","forceDisabled","onDelete","onClose"])),[[o.vShow,n.showImageField(t)]]):(0,o.createCommentVNode)("v-if",!0),"video"===t.type?(0,o.withDirectives)(((0,o.openBlock)(),(0,o.createBlock)(c,(0,o.mergeProps)({key:1},{...e.$props,...e.$attrs,...t,attr:{...t.attr,...e.$attrs.attr}},{forceActive:d.fieldForceActive&&n.showVideoField(t),forceDisabled:!d.mediaType||"image"===d.mediaType,onDelete:n.onDeleteMedia,onClose:n.onFieldClose}),null,16,["forceActive","forceDisabled","onDelete","onClose"])),[[o.vShow,n.showVideoField(t)]]):(0,o.createCommentVNode)("v-if",!0)],64)))),128))]))}]])},51875:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>h});var o=i(5166);const a={class:"td-form__video"};var l=i(12954),d=i(50765),n=i(7272),r=i(2181),s=i(16147),c=i(97153),m=i(40825),p=i(32146),u=i(19371);const _={components:{Field:l.gN,ImageAlt:n.default,ImageCaption:r.default,MediaActions:s.default,MediaFields:c.default,MediaPlaceholder:m.default,VideoModal:p.default,VideoPreview:u.default},mixins:[d.Z],inheritAttrs:!1,props:{suppressError:{type:Boolean,default:!0},errors:{type:Object,default:()=>({})},setFieldValue:{type:Function,default:()=>{}},forceActive:{type:Boolean,default:!1},forceDisabled:{type:Boolean,default:!1}},emits:["delete","close"],data(){return{hasThumb:!1,thumbField:null,provider:"",identifier:"",active:this.forceActive}},computed:{hasVideo(){return this.provider&&this.identifier}},mounted(){this.config=this.$attrs.attr;const e=this.$attrs.fields.filter((e=>"image"===e.type));if(this.hasThumb=1===e.length,this.hasThumb){this.thumbField=e[0];["bucket","mediaGuid","uri"].forEach((e=>{const t=this.thumbField.fields.find((t=>t.label===e));t&&this.setFieldValue(t.name,t.value)}))}this.$attrs.fields.forEach((e=>{"image"!==e.type&&(this[e.label]=e.value)}

1)),this.updateValues()},methods:{onEditClick(){this.active=!0},onEditClose(){this.active=!1,this.$emit("close")},onUpload(e){if(this.provider=e.provider,this.identifier=e.identifier,this.updateValues(),this.hasThumb&&e.image){["bucket","mediaGuid","uri"].forEach((t=>{const i=this.thumbField.fields.find((e=>e.label===t));i&&this.setFieldValue(i.name,e.image[t])}))}this.$emit("close")},onDeleteClick(){this.$attrs.fields.forEach((e=>{this[e.label]=""}));["bucket","mediaGuid","uri"].forEach((e=>{const t=this.thumbField.fields.find((t=>t.label===e));t&&this.setFieldValue(t.name,"")})),this.updateValues(),this.$emit("delete")},onAltTextChange(e){this.altText=e;const t=this.thumbField.fields.find((e=>"altText"===e.label));t&&this.setFieldValue(t.name,""),this.updateValues()},onCaptionChange(e){this.caption=e;const t=this.thumbField.fields.find((e=>"caption"===e.label));t&&this.setFieldValue(t.name,""),this.updateValues()}}};const h=(0,i(83744).Z)(_,[["render",function(e,t,i,l,d,n){const r=(0,o.resolveComponent)("ImageAlt"),s=(0,o.resolveComponent)("VideoPreview"),c=(0,o.resolveComponent)("ImageCaption"),m=(0,o.resolveComponent)("MediaActions"),p=(0,o.resolveComponent)("MediaPlaceholder"),u=(0,o.resolveComponent)("VideoModal"),_=(0,o.resolveComponent)("MediaFields"),h=(0,o.resolveComponent)("Field");return(0,o.openBlock)(),(0,o.createElementBlock)("div",a,[n.hasVideo?((0,o.openBlock)(),(0,o.createElementBlock)(o.Fragment,{key:0},[e.config.enableAlt?((0,o.openBlock)(),(0,o.createBlock)(r,{key:0,altText:e.altText,onChange:n.onAltTextChange},null,8,["altText","onChange"])):(0,o.createCommentVNode)("v-if",!0),(0,o.createVNode)(s,{provider:d.provider,identifier:d.identifier},null,8,["provider","identifier"]),e.config.enableCaption?((0,o.openBlock)(),(0,o.createBlock)(c,{key:1,caption:e.caption,onChange:n.onCaptionChange},null,8,["caption","onChange"])):(0,o.createCommentVNode)("v-if",!0),(0,o.createVNode)(m,{onEdit:n.onEditClick,onDelete:n.onDeleteClick},null,8,["onEdit","onDelete"])],64)):((0,o.openBlock)(),(0,o.createBlock)(p,{key:1,type:"video",buttonLabel:e.$attrs.label,onEdit:n.onEditClick},null,8,["buttonLabel","onEdit"])),(0,o.createVNode)(u,{active:i.forceActive||d.active,onClose:n.onEditClose,onUpload:n.onUpload},null,8,["active","onClose","onUpload"]),(0,o.createVNode)(_,{fields:e.$attrs.fields,required:e.$attrs.required,forceDisabled:i.forceDisabled,errorMessage:"Please select a valid video"},null,8,["fields","required","forceDisabled"]),d.hasThumb?((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,{key:2},(0,o.renderList)(d.thumbField.fields,(e=>((0,o.openBlock)(),(0,o.createBlock)(h,{id:e.name,key:e.name,name:e.name,type:"hidden"},null,8,["id","name"])))),128)):(0,o.createCommentVNode)("v-if",!0)])}]])},19371:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>r});var o=i(5166);const a=["src"],l=["src"],d=["src"];const n={components:{IconBase:i(45613).Z},props:{provider:{type:String,default:""},identifier:{type:[String,Number],default:""}},computed:{isStream(){return"mux"===this.provider}}};const r=(0,i(83744).Z)(n,[["render",function(e,t,i,n,r,s){const c=(0,o.resolveComponent)("IconBase");return(0,o.openBlock)(),(0,o.createElementBlock)("div",{class:(0,o.normalizeClass)(["td-form__video__preview",{"td-form__video__preview--stream":s.isStream}])},["youtube"===i.provider?((0,o.openBlock)(),(0,o.createElementBlock)("iframe",{key:0,src:`https://www.youtube.com/embed/${i.identifier}`,class:"td-form__video__preview__iframe",frameborder:"0",allow:"fullscreen; picture-in-picture"},null,8,a)):(0,o.createCommentVNode)("v-if",!0),"vimeo"===i.provider?((0,o.openBlock)(),(0,o.createElementBlock)("iframe",{key:1,src:`https://player.vimeo.com/video/${i.identifier}`,class:"td-form__video__preview__iframe",frameborder:"0",allow:"fullscreen; picture-in-picture"},null,8,l)):(0,o.createCommentVNode)("v-if",!0),(0,o.createCommentVNode)(" editor preview only: the thumbnail confirms the right video was attached "),s.isStream?((0,o.openBlock)(),(0,o.createElementBlock)(o.Fragment,{key:2},[(0,o.createElementVNode)("img",{src:`https://image.mux.com/${i.identifier}/thumbnail.jpg`,class:"td-form__video__preview__thumbnail",alt:"Video thumbnail"},null,8,d),(0,o.createVNode)(c,{icon:"play"})],64)):(0,o.createCommentVNode)("v-if",!0)],2)}]])}}]);