@vueframe/vueframe
Version:
High performance, rich media embed components. For your site, built using Vue.
2 lines (1 loc) • 3.92 kB
JavaScript
;require("lite-youtube-embed"),require("lite-youtube-embed/src/lite-yt-embed.css");var e=require("vue");require("lite-vimeo-embed");var t={name:"YouTube",props:{id:{type:String,required:!0},title:{type:String,default:void 0},poster:{type:String,default:void 0},posterquality:{type:String,default:"default",validator:e=>["max","high","default","low"].includes(e)},params:{type:String,default:void 0}},computed:{videoId(){return(e=>{if(!e)return null;const t=String(e);if(t.includes("youtu.be/"))return t.split("youtu.be/")[1].split(/[?&]/)[0];if(t.includes("youtube.com/")){const e=t.match(/[?&]v=([^?&]+)/);return e?e[1]:null}return/^[A-Za-z0-9_-]{11}$/.test(t)?t:null})(this.id)||""},postersrc(){return this.poster||(this.videoId?`https://img.youtube.com/vi/${this.videoId}/${{max:"maxresdefault",high:"hqdefault",default:"sddefault",low:"default"}[this.posterquality]||"sddefault"}.jpg`:"")}},mounted(){this.enforcePoster(),this.setupMutationObserver()},methods:{enforcePoster(){this.$refs.youtube&&this.postersrc&&(this.$refs.youtube.style.backgroundImage=`url('${this.postersrc}')`)},setupMutationObserver(){const e=new MutationObserver((e=>{e.forEach((e=>{"attributes"===e.type&&"style"===e.attributeName&&this.enforcePoster()}))}));this.$refs.youtube&&e.observe(this.$refs.youtube,{attributes:!0,attributeFilter:["style"]})}},watch:{postersrc:{handler(){this.$nextTick(this.enforcePoster)},immediate:!0}},beforeDestroy(){this.observer&&this.observer.disconnect()}};function i(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&r.firstChild?r.insertBefore(s,r.firstChild):r.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}i("\nlite-youtube {\r\n aspect-ratio: 16 / 9;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n display: inline-flex;\r\n overflow: hidden;\n}\r\n"),t.render=function(t,i,r,s,o,n){const u=e.resolveComponent("lite-youtube");return e.openBlock(),e.createBlock(u,{ref:"youtube",videoid:n.videoId,title:r.title,params:r.params},null,8,["videoid","title","params"])},t.__file="src/components/YouTube.vue";var r={name:"Vimeo",props:{id:{type:String,required:!0},title:{type:String,default:void 0},poster:{type:String,default:void 0},posterquality:{type:String,default:"default",validator:e=>["max","high","default","low"].includes(e)}},computed:{videoId(){return(e=>{if(!e)return null;const t=String(e);return t.includes("vimeo.com/")?t.split("vimeo.com/")[1].split(/[?&]/)[0]:/^\d+$/.test(t)?t:null})(this.id)||""},postersrc(){return this.poster||(this.videoId?`https://vumbnail.com/${this.videoId}_${{max:"thumbnail_large",high:"thumbnail_medium",default:"thumbnail_medium",low:"thumbnail_small"}[this.posterquality]||"thumbnail_medium"}.jpg`:"")}},mounted(){this.enforcePoster(),this.setupMutationObserver()},methods:{enforcePoster(){this.$refs.vimeo&&this.postersrc&&(this.$refs.vimeo.style.backgroundImage=`url('${this.postersrc}')`)},setupMutationObserver(){const e=new MutationObserver((e=>{e.forEach((e=>{"attributes"===e.type&&"style"===e.attributeName&&this.enforcePoster()}))}));this.$refs.vimeo&&e.observe(this.$refs.vimeo,{attributes:!0,attributeFilter:["style"]})}},watch:{postersrc:{handler(){this.$nextTick(this.enforcePoster)},immediate:!0}},beforeDestroy(){this.observer&&this.observer.disconnect()}};i("\nlite-vimeo {\r\n aspect-ratio: 16 / 9;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n display: inline-flex;\r\n overflow: hidden;\n}\r\n"),r.render=function(t,i,r,s,o,n){const u=e.resolveComponent("lite-vimeo");return e.openBlock(),e.createBlock(u,{ref:"vimeo",videoid:n.videoId,"data-title":r.title},null,8,["videoid","data-title"])},r.__file="src/components/Vimeo.vue",exports.Vimeo=r,exports.YouTube=t;