https://www.deutsche-digitale-bibliothek.de/assets/components/mediaVideoContainer.js

1var process = process || {env: {NODE_ENV: "development"}};
2/*
3 Copyright 2026 FIZ Karlsruhe - Leibniz-Institut fuer Informationsinfrastruktur GmbH
4
5 Licensed under the Apache License, Version 2.0 (the "License");
6 you may not use this file except in compliance with the License.
7 You may obtain a copy of the License at
8
9       https://www.apache.org/licenses/LICENSE-2.0
10
11 Unless required by applicable law or agreed to in writing, software
12 distributed under the License is distributed on an "AS IS" BASIS,
13 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 See the License for the specific language governing permissions and
15 limitations under the License.
16*/
17
18import {getViewportInfo} from "../helpers/helpers.js";
19import {mediaContainerEvents, PictureDerails} from "../views/item/item.js";
20import {
21    checkValidLicense,
22    updateDownloadDialog,
23    updateDownloadSource
24} from "../views/item/mediaviewerDownloadHandler.js";
25import {VimeoPlayerWrapper} from "./vimeoPlayerWrapper.js";
26import {VimeoEmbedManager} from "./embedManager.js";
27
28const MAX_HEIGHT_XS = "330px";
29const MAX_HEIGHT_SM = "340px";
30const MAX_HEIGHT_MD = "415px";
31const MAX_HEIGHT_LG = "460px";
32const MAX_HEIGHT_XL = "566px";
33export const initMediaVideoContainer = () => {
34    let mediaVideo = document.getElementById("media-video");
35    if (!mediaVideo) {
36        return;
37    }
38    let videoData = JSON.parse(mediaVideo.getAttribute("data-media-video-list"));
39    if (!document.getElementById("video-binary")) {
40        return;
41    }
42    const itemTitle = document.getElementById("item-title");
43    let mediaVideoIndex = 0;
44    let displayVideoAmount = document.getElementById("media-video-amount");
45    let displayCurrentIndex = document.getElementById("media-video-current-index");
46    let controlNextVideo = document.getElementById("media-video-next");
47    let controlPrevVideo = document.getElementById("media-video-previous");
48    let downLoadVideoButton = document.getElementById("menu-button-video-download");
49    let videoPlayer = document.getElementById("media-video-player");
50    let downloadButton = document.querySelector(".download-destination");
51    let validLicenseList = "";
52    validLicenseList = JSON.parse(mediaVideo.getAttribute('data-valid-License-List'));
53
54    const nextVideo = () => {
55        mediaVideoIndex++;
56
57        if (mediaVideoIndex + 1 <= videoData.length) {
58            displayCurrentIndex.innerHTML = (mediaVideoIndex + 1).toString();
59        } else {
60            mediaVideoIndex = 0;
61            displayCurrentIndex.innerHTML = (mediaVideoIndex + 1).toString();
62        }
63        updateData();
64    };
65
66    const prevVideo = () => {
67        mediaVideoIndex--;
68
69        if (mediaVideoIndex + 1 >= 1) {
70            displayCurrentIndex.innerHTML = (mediaVideoIndex + 1).toString();
71        } else {
72            mediaVideoIndex = videoData.length - 1;
73            displayCurrentIndex.innerHTML = videoData.length.toString();
74        }
75        updateData();
76    };
77
78    const updateData = () => {
79        const currentResult = videoData[mediaVideoIndex];
80
81        checkValidLicense(videoData[mediaVideoIndex].rightsUrl, validLicenseList, downLoadVideoButton);
82
83        // Remove embed cookie notice container if it exists
84        document.querySelectorAll(".embed-cookie-notice-container").forEach(el => el.remove());
85
86        if (videoData[mediaVideoIndex].mimeType === VimeoPlayerWrapper.MIME_TYPE) {
87            videoPlayer.style.display = "none";
88            const vimeoEmbedManager = new VimeoEmbedManager();
89            vimeoEmbedManager.init({
90                div: mediaVideo,
91                videoData: videoData,
92                index: mediaVideoIndex,
93                binaryRef: videoData[mediaVideoIndex].ref
94            })
95
96            // Hide Download button for Vimeo videos.
97            downLoadVideoButton.classList.remove('d-block');
98            downLoadVideoButton.classList.add('d-none');
99        } else {
100            videoPlayer.style.display = "block";
101            videoPlayer.src = videoData[mediaVideoIndex].orig.uri;
102            videoPlayer.poster = videoData[mediaVideoIndex].full.uri;
103        }
104
105        const videoChangedEvent = new CustomEvent(mediaContainerEvents.imageChanged, {
106            "detail": {
107                pictureDerails: new PictureDerails(
108                    "video-wrapper",
109                    itemTitle,
110                    currentResult.title,
111                    currentResult.author,
112                    currentResult.rights,
113                    currentResult.licenseInformation.id,

114                    currentResult.licenseInformation.shortName,
115                    currentResult.licenseInformation.text,
116                    currentResult.licenseInformation.url)
117            }
118        });
119        document.dispatchEvent(videoChangedEvent);
120    };
121
122    if (videoData.length > 0) {
123        updateData();
124        if (displayVideoAmount && displayCurrentIndex && controlNextVideo && controlNextVideo) {
125            displayVideoAmount.innerHTML = videoData.length;
126            displayCurrentIndex.innerHTML = (mediaVideoIndex + 1).toString();
127            controlNextVideo.addEventListener("click", nextVideo);
128            controlPrevVideo.addEventListener("click", prevVideo);
129        }
130        if (downLoadVideoButton) {
131            downLoadVideoButton.addEventListener('click', () => {
132                const currentResult = videoData[mediaVideoIndex];
133                updateDownloadSource(currentResult.title, currentResult.orig.uri, downloadButton);
134                updateDownloadDialog(currentResult.title, currentResult.author, currentResult.rights, currentResult.rightsUrl);
135            });
136        }
137    }
138};
139
140const calculateHeight = () => {
141    const viewPortInfo = getViewportInfo();
142
143    if (viewPortInfo) {
144        if (viewPortInfo.isAtMost("xs")) {
145            return MAX_HEIGHT_XS;
146        }
147        if (viewPortInfo.isAtMost("sm")) {
148            return MAX_HEIGHT_SM;
149        }
150        if (viewPortInfo.isAtMost("md")) {
151            return MAX_HEIGHT_MD;
152        }
153        if (viewPortInfo.isAtMost("lg")) {
154            return MAX_HEIGHT_LG;
155        }
156    }
157    return MAX_HEIGHT_XL;
158};