https://www.matermiddlehigh.org/apps-shared/video_player/envideo-loader.js

1class ENVideoLoader {
2
3    targetNode = document.body;
4    observerConfig = {attributes: true, subtree: true};
5    static envideoutils_js_file = "/apps-shared/video_player/envideoutils.js";
6    static envideo_js_file = "/apps-shared/video_player/envideo.js";
7
8    constructor() {
9        this.loadScripts()
10            .then(() => {
11                this.replaceVideosWithENVideo();
12                const observer = new MutationObserver(this.mutationListener);
13                observer.observe(this.targetNode, this.observerConfig);
14            }).catch(e => {
15            console.error(`error while loading envideo scripts ${e}`);
16        })
17
18    }
19
20    loadScripts = async () => {
21        await ENVideoLoader.loadScript(ENVideoLoader.envideoutils_js_file);
22        await ENVideoLoader.loadScript(ENVideoLoader.envideo_js_file);
23    }
24
25    replaceVideosWithENVideo = () => {
26        const videoElements = document.querySelectorAll('video[en-video-player]');
27        videoElements.forEach(video => {
28            const enVideo = document.createElement('en-video');
29            Array.from(video.attributes).forEach(attr => {
30                enVideo.setAttribute(attr.name, attr.value);
31            });
32            while (video.firstChild) {
33                enVideo.appendChild(video.firstChild);
34            }
35            video.replaceWith(enVideo);
36        });
37    }
38
39    mutationListener = (mutationsList) => {
40        mutationsList.forEach(mutation => {
41            if (mutation.type === 'childList') {
42                mutation.addedNodes.forEach(node => {
43                    if (node.tagName === 'VIDEO' && node.classList.contains('en-video-player')) {
44                        ENVideoLoader.convertVideoToEnVideo(mutation.target);
45                        console.log('new video element added into the dom. the video has been converted to en-video');
46                    }
47                });
48            } else if (mutation.type === 'attributes' && mutation.target.tagName === 'VIDEO') {
49                const video = mutation.target;
50                if (video.classList.contains('en-video-player')) {
51                    ENVideoLoader.convertVideoToEnVideo(video);
52                    console.log(`en-video-player class has been added to video. the video has been converted to en-video`);
53                }
54            }
55        });
56    };
57
58    static convertVideoToEnVideo = (video) => {
59        const enVideo = document.createElement('en-video');
60        video.replaceWith(enVideo);
61        [...video.attributes].forEach(attr => enVideo.setAttribute(attr.name, attr.value));
62        while (video.firstChild) {
63            enVideo.appendChild(video.firstChild);
64        }
65    }
66
67    static  loadScript = url => new Promise((resolve, reject) => {
68        if (!document.querySelector(`script[src="${url}"]`)) {
69            const script = document.createElement('script');
70            script.src = url;
71            script.onload = resolve;
72            script.onerror = reject;
73            document.head.appendChild(script);
74        } else {
75            resolve();
76        }
77    });
78
79
80}
81
82document.addEventListener('DOMContentLoaded', () => {
83    var _enVideoLoader = new ENVideoLoader();
84})
85
86