{"version":3,"sources":["webpack:////Users/xingli/Documents/projects/projects/ara-fe/src/views/blocks/simpleVideoBlock/js/simpleVideoBlock.js"],"names":["getIframe","type","src","youtubeTemplate","mp4Template","vimeoTemplate","SimpleVideoBlock","$el","_classCallCheck","this","el","$","$elPar","document","body","isModal","data","toString","$iframe","$modal","getModal","template","init","_this","find","on","showModal","showIframe","querySelector","innerHTML","append","modal","listenHideModal","remove"],"mappings":"2cAYA,SAASA,UAAUC,EAAMC,GAaxB,MAAW,WAARD,EAZCE,kFACwED,EADxE,gGAaO,OAARD,EANCG,4EAEaF,EAFb,uBAJAG,qDAC2CH,EAD3C,wGAqCQI,4BAEZ,SAAAA,iBAAYC,gHAAKC,CAAAC,KAAAH,kBAEhBG,KAAKC,GAAKH,EACVE,KAAKF,IAAMI,EAAEJ,GACbE,KAAKG,OAASD,EAAEE,SAASC,MAEzBL,KAAKM,QAAW,SAAWN,KAAKF,IAAIS,KAAK,YAAYC,WACrDR,KAAKS,QAAUlB,UAAUS,KAAKF,IAAIS,KAAK,aAAcP,KAAKF,IAAIS,KAAK,YACnEP,KAAKU,OA/BP,SAASC,SAASnB,EAAMC,GAEvB,IAAImB,kbAQGrB,UAAUC,EAAMC,GARnB,6EAgBJ,OAAOS,EAAEU,GAaMD,CAASX,KAAKF,IAAIS,KAAK,aAAcP,KAAKF,IAAIS,KAAK,YAEjEP,KAAKa,oEAGC,IAAAC,EAAAd,KACNA,KAAKF,IAAIiB,KAAK,8BAA8BC,GAAG,QAAS,WACtDF,EAAKR,QACHQ,EAAKG,YACLH,EAAKI,+DAMTlB,KAAKC,GAAGkB,cAAc,qBAAqBC,UAAYpB,KAAKS,sDAK5DT,KAAKG,OAAOkB,OAAOrB,KAAKU,QAExBR,EAAE,eAAeoB,QAEjBtB,KAAKuB,4EAILrB,EAAE,eAAec,GAAG,gBAAiB,WACpCd,EAAE,eAAesB","file":"block-17.317c86355b23b3978b5f.js","sourcesContent":["// CONSTANTS are all caps.\nconst NS = 'SimpleVideoBlock';\nconst CLS = 'simpleVideoBlock';\nconst BLK = '.' + CLS + '-';\n\n// Import stuff here if you need to or even better to import them dynamically\n// for ex. of dynamic import check out ./loadBlk.js using Webpack dynamic imports as chunks.\n// import $ from 'jquery'\n// import rVideoBlock from './VideoBlock.jsx';\n// import React from 'react';\n// import ReactDOM from 'react-dom';\n\nfunction getIframe(type, src) {\n\tlet youtubeTemplate = `\n\t\t<iframe class=\"embed-responsive-item\" src=\"https://www.youtube.com/embed/${src}\" allowfullscreen=\"allowfullscreen\" allowscriptaccess=\"always\" allow=\"autoplay\"></iframe>\n\t`;\n\tlet vimeoTemplate = `\n\t\t<iframe src=\"https://player.vimeo.com/video/${src}?embedparameter=value\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen></iframe>\n\t`\n\n\tlet mp4Template = `\n\t\t<video class=\"embed-responsive-item\" controls>\n\t\t\t<source src=\"${src}\">\n\t\t</video>\n\t`\n\tif(type == 'youtube') {return youtubeTemplate; }\n\tif(type == 'mp4') {return mp4Template; }\n\telse {\n\t\treturn vimeoTemplate;\n\t}\n}\n\nfunction getModal(type, src) {\n\t// <iframe class=\"embed-responsive-item\" src=\"${src}\" allowfullscreen=\"allowfullscreen\" allowscriptaccess=\"always\" allow=\"autoplay\"></iframe>\n\tlet template = `\n\t<div id=\"videoModal\" class=\"modal hide fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"false\">\n\t\t<div class=\"modal-dialog\" role=\"document\">\n\t\t\t<div class=\"iconClose close mb-3\" data-dismiss=\"modal\" aria-label=\"Close\"></div>\n\t\t\t<div class=\"modal-content\">\n\t\t\t\t<div class=\"modal-body p-0\">\n\t\t\t\t\t<!-- 16:9 aspect ratio -->\n\t\t\t\t\t<div class=\"embed-responsive embed-responsive-16by9\">\n\t\t\t\t\t\t${getIframe(type, src)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`;\n\n\treturn $(template);\n}\n\nexport class SimpleVideoBlock {\n\n\tconstructor($el) {\n\t\t// $el is the blk node return by the loadVideoBlock function\n\t\tthis.el = $el;\n\t\tthis.$el = $($el);\n\t\tthis.$elPar = $(document.body);\n\n\t\tthis.isModal = ('true' === this.$el.data('lightbox').toString());\n\t\tthis.$iframe = getIframe(this.$el.data('videotype'), this.$el.data('videoid'));\n\t\tthis.$modal = getModal(this.$el.data('videotype'), this.$el.data('videoid'));\n\n\t\tthis.init();\n\t}\n\n\tinit() {\n\t\tthis.$el.find('.simpleVideoBlock-play-btn').on('click', () => {\n\t\t\t(this.isModal)\n\t\t\t\t? this.showModal()\n\t\t\t\t: this.showIframe();\n\n\t\t})\n\t}\n\n\tshowIframe() {\n\t\tthis.el.querySelector('.embed-responsive').innerHTML = this.$iframe;\n\t}\n\n\tshowModal() {\n\t\t// append to body incase not working inside the slick\n\t\tthis.$elPar.append(this.$modal);\n\t\t// this.$el.append(this.$modal);\n\t\t$('#videoModal').modal();\n\n\t\tthis.listenHideModal();\n\t}\n\n\tlistenHideModal() {\n\t\t$('#videoModal').on('hide.bs.modal', () => {\n\t\t\t$('#videoModal').remove();\n\t\t});\n\t}\n\n\n\t// Add more functions like on above here\n}\n"],"sourceRoot":""}