{"version":3,"file":"videoThumbnail.js","mappings":"AAAAA,SAASC,iBAAiB,oBAAoB,WAG7C,IAAMC,EAAiBF,SAASG,cAAc,kBACxCC,EAAQJ,SAASG,cAAc,iBAC/BE,EAAYL,SAASG,cAAc,uBACnCG,EAAiBN,SAASG,cAAc,mBAAmBI,YAEjE,GAAIF,GAAaD,EAAO,CAEvB,IAAMI,EAASR,SAASS,cAAc,UACtCD,EAAOE,UAAUC,IAAI,eACrB,IAAMC,EAASZ,SAASG,cAAc,mBAetCC,EAAMH,iBAAiB,kBAAkB,WACxCG,EAAMS,YAAcP,EAAiBF,EAAMU,UAA+B,IAAnBR,EAAwBA,EAAiB,EAChG,IAGDF,EAAMH,iBAAiB,UAlBF,SAAfc,IACLP,EAAOQ,MAAQZ,EAAMa,WACrBT,EAAOU,OAASd,EAAMe,YACRX,EAAOY,WAAW,MACxBC,UAAUjB,EAAO,EAAG,EAAGI,EAAOQ,MAAOR,EAAOU,QACpDhB,EAAeoB,YAAYd,GAC3BI,EAAOF,UAAUC,IAAI,UAErBP,EAAMmB,oBAAoB,SAAUR,EAEpC,IAWDV,EAAUJ,iBAAiB,SAAS,WACnCI,EAAUmB,MAAMC,QAAU,OAC1BjB,EAAOgB,MAAMC,QAAU,OACvBrB,EAAMS,YAAc,EACpBT,EAAMsB,MACN,GACD,CACD","sources":["webpack://MandG/./src/js/pages/insights/videoThumbnail.js"],"sourcesContent":["document.addEventListener('DOMContentLoaded', () => {\r\n  // Creates custom video thumbnail on client-side based on user-inputted frame in umbraco \r\n\r\n\tconst videoContainer = document.querySelector('.article-video')\r\n\tconst video = document.querySelector('.videoArticle');\r\n\tconst thumbnail = document.querySelector('div .videoThumbnail');\r\n\tconst thumbnailFrame = document.querySelector('#thumbnailFrame').textContent\r\n\t\r\n\tif (thumbnail && video) {\r\n\r\n\t\tconst canvas = document.createElement('canvas');\r\n\t\tcanvas.classList.add('video-frame')\r\n\t\tconst loader = document.querySelector('.loader-overlay');\r\n\t\t\r\n\t\tconst captureImage = () => {\r\n\t\t\tcanvas.width = video.videoWidth;\r\n\t\t\tcanvas.height = video.videoHeight;\r\n\t\t\tlet context = canvas.getContext('2d');\r\n\t\t\tcontext.drawImage(video, 0, 0, canvas.width, canvas.height);\r\n\t\t\tvideoContainer.appendChild(canvas)\r\n\t\t\tloader.classList.add('loaded')\r\n\t\t\t// Remove event listener and reset currentTime\r\n\t\t\tvideo.removeEventListener('seeked', captureImage)\r\n\t\t\t// video.currentTime = 0\r\n\t\t}\r\n\r\n\t\t// Jump to inputted frame when video metadata is loaded\r\n\t\tvideo.addEventListener('loadedmetadata', () => {\r\n\t\t\tvideo.currentTime = thumbnailFrame < video.duration && thumbnailFrame !== 0  ? thumbnailFrame : 10;\r\n\t\t})\r\n\r\n\t\t// Fires after currentTime is updated - this is so we can capture the thumbnail at the correct frame\r\n\t\tvideo.addEventListener('seeked', captureImage)\r\n\r\n\t\t// Hide thumbnail on click and play video\r\n\t\tthumbnail.addEventListener('click', () => {\r\n\t\t\tthumbnail.style.display = 'none';\r\n\t\t\tcanvas.style.display = 'none';\r\n\t\t\tvideo.currentTime = 0\r\n\t\t\tvideo.play();\r\n\t\t})\r\n\t}\r\n})"],"names":["document","addEventListener","videoContainer","querySelector","video","thumbnail","thumbnailFrame","textContent","canvas","createElement","classList","add","loader","currentTime","duration","captureImage","width","videoWidth","height","videoHeight","getContext","drawImage","appendChild","removeEventListener","style","display","play"],"sourceRoot":""}