https://www.arwag.at/_resources/app/themes/arwag/js/components/Element/VideoOverlay.js?m=1766124355

1(function (util) {
2    var componentType = registerComponentType('videooverlay');
3
4
5    componentType.onCreate(function (component) {
6
7        const overlay = component.getElement('overlay');
8        const overlayContent = component.getElement('overlayContent');
9        const video = component.getElement('video');
10        let player = undefined;
11        let ready = undefined;
12
13        component.on('open', function () {
14            window.Rolv.show($(overlay));
15
16            window.setTimeout(function(){
17                overlayContent.style.width = '98vw';
18                let width = overlayContent.getBoundingClientRect().width;
19                while(width > 300 && overlayContent.getBoundingClientRect().height >= overlay.getBoundingClientRect().height - 10){
20                    overlayContent.style.width = width+'px';
21                    width -= 10;
22                }
23            }, 100);
24
25            if(!player) {
26                player = new Plyr(video, {
27                    controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'airplay'],
28                    iconUrl: window.app._config.video.sprite
29                });
30
31                player.on('timeupdate', () => {
32                    component.rootNode.setAttribute('data-videooverlay-time', player.currentTime);
33                });
34
35                let source = component.getConfigScalar('src');
36
37                if(window.app._config.videoProxy){
38                    source = window.app._config.videoProxy(source);
39                }
40
41                ready = new Promise((resolve) => {
42                    player.on('loadedmetadata', resolve);
43
44                    if (!Hls.isSupported()) {
45                        video.src = source;
46                    } else {
47                        const hls = new Hls({
48                            capLevelOnFPSDrop: true,
49                            startLevel: -1, // required for testBandwidth
50                            testBandwidth: true
51                        });
52                        hls.loadSource(source);
53                        hls.attachMedia(video);
54
55                        hls.once(Hls.Events.MANIFEST_LOADED, function () {
56                            component.onResize(function () {
57                                let pixelRatio = 1;
58                                try {
59                                    pixelRatio = window.devicePixelRatio;
60                                } catch (e) {
61                                    /* no-op */
62                                }
63                                let maxLevelIndex = hls.levels.length - 1;
64
65                                let tolerance = 1.05;
66                                if (pixelRatio >= 2) {
67                                    tolerance = 1.2;
68                                }
69
70                                const videoDimensions = {
71                                    width: pixelRatio * window.innerWidth,
72                                    height: pixelRatio * window.innerHeight,
73                                };
74
75                                for (let i = 0; i < hls.levels.length; i += 1) {
76                                    const level = hls.levels[i];
77                                    if (level.width * tolerance >= videoDimensions.width && level.height * tolerance >= videoDimensions.height) {
78                                        //console.log(i, level.width, videoDimensions.width, level.height, videoDimensions.height)
79                                        maxLevelIndex = i;
80                                        break;
81                                    }
82                                }
83                                hls.autoLevelCapping = maxLevelIndex;
84                            });
85                        });
86
87                        player.on('play', function () {
88                            component.do('open');
89                        });
90                    }
91                });
92
93                $(overlay).on('RolvClosed', function(){
94                    component.do('close');
95                });
96            }
97
98            const time = component.getConfigScalar('time') || 0;
99            ready.then(() => {
100                player.mute = false;

101                player.play();
102                player.currentTime = Number.parseFloat(time);
103            });
104
105        });
106
107        component.on('close', () => {
108            player.pause();
109        });
110
111        component.onDOMEvent('open', 'click', 'open');
112
113    });
114
115    componentType.autoRegisterComponents();
116
117})(window.jQueryPolyfill);