Source: utils/template/functions/media.js

  1. import { createLightboxImage } from "../../../media/viewer/imagePreview.js";
  2. import { initVideo } from "../../../media/viewer/videoPlayer.js";
  3. import { VideoPlayerShortcuts } from "../../../media/player/VideoPlayerShortcuts.js";
  4. import { VideoPlayerUtils } from "../../../media/player/VideoPlayerUtils.js";
  5. import { guessIFDOKey, getHTMLOfIFDOIcon } from "../../../media/viewer/iFDO.js";
  7. /**
  8.  * 
  9.  * 
  10.  * @param {string} src 
  11.  * @param {string} width (optional)
  12.  * @param {string} height (optional)
  13.  * @param {string} srcset (optional)
  14.  * @returns {HTMLElement} div placeholder
  15.  */
  16. export function displayImage(src, width, height, srcset) {
  18.     src = src || 'https://broken-image-url';
  20.     const target = document.createElement("div");
  21.     target.classList.add("image-wrapper");
  23.     if (width != null && height != null) {
  24.         const container = createLightboxImage(src, width, height, srcset);
  25.         target.appendChild(container)
  26.     }
  27.     else {
  28.         const img = new Image();
  29.         img.onload = () => {
  30.             const container = createLightboxImage(src, img.width, img.height, srcset);
  31.             target.appendChild(container);
  32.         };
  33.         img.src = src;
  34.         if (srcset != null)
  35.             img.srcset = srcset;
  36.     }
  38.     return target;
  39. }
  41. // static video player instance
  42. let videoPlayerDiv = null;
  44. /**
  45.  * 
  46.  * @param {string} media 
  47.  * @param {string} width 
  48.  * @param {string} height 
  49.  * @param {string} thumbnail (optional)
  50.  * @param {string} cover (optional)
  51.  * @param {string} poster (optional)
  52.  * @returns {HTMLElement} div placeholder
  53.  */
  54. export function displayVideo(media, width, height, thumbnail, cover, poster) {
  55.     if (videoPlayerDiv) {
  56.         videoPlayerDiv.remove();
  57.         videoPlayerDiv = null;
  58.     }
  60.     if (media == null)
  61.         return undefined
  63.     videoPlayerDiv = document.createElement("div");
  64.     videoPlayerDiv.classList.add("video");
  66.     const video = initVideo({
  67.         'media': media,
  68.         'thumbnail': thumbnail,
  69.         'cover': cover,
  70.         'poster': poster || VideoPlayerUtils.getPoster(),
  71.         'initPlayerWithKeyFocus': true
  72.     });
  73.     const videoContainer = document.createElement('div');
  74.     if (width && height) {
  75.         videoContainer.style = `width: 100%; height: 0; padding-bottom: calc(100% * ${height}/${width}); position: relative;`
  76.         video.style = 'position: absolute; width: 100%; height: 100%';
  77.     }
  78.     else {
  79.         console.warn('The video player is initialized without width and height. As a result, the dimensions of the video player are not known until the video is loaded. This can lead to sudden changes in the layout when the video player is displayed.')
  80.     }
  81.     videoContainer.append(video)
  82.     videoPlayerDiv.appendChild(videoContainer)
  84.     return videoPlayerDiv;
  85. }
  87. // static video player keyboard shortcut instance
  88. let shortcutsWindow = null;
  90. /**
  91.  * @returns {HTMLElement} div placeholder
  92.  * 
  93.  */
  94. export function displayVideoPlayerKeys() {
  95.     const target = document.createElement("div");
  96.     const keyboardShortcutLink = document.createElement("a");
  97.     keyboardShortcutLink.style = "display: inline-block; text-decoration: none;";
  98.     keyboardShortcutLink.href = "#";
  99.     keyboardShortcutLink.innerHTML = "<i class='fas fa-keyboard'></i> Keyboard Shortcuts";
  100.     keyboardShortcutLink.onclick = e => {
  101.         e.preventDefault();
  102.         if (!shortcutsWindow)
  103.             shortcutsWindow = new VideoPlayerShortcuts();
  104.         if (!shortcutsWindow.isOpened)
  105.             shortcutsWindow.open();
  106.         else
  107.             shortcutsWindow.close();
  108.     }
  110.     if (!videoPlayerDiv)
  111.         target.style.display = 'None';
  113.     target.appendChild(keyboardShortcutLink);
  114.     return target;
  115. }
  117. /**
  118.  * @param {object} featureProperties
  119.  * @returns {HTMLElement} div placeholder
  120.  * 
  121.  */
  122. export function displayIFDOIcons(featureProperties) {
  123.     const containerElement = document.createElement('div');
  124.     containerElement.classList.add('inline-block-container-ifdo-icon');
  125.     containerElement.setAttribute('data-config-remove-empty-column', false);
  126.     let containerChildrenHTML = "";
  128.     for (const [featurePropertiesKey, featurePropertiesValue] of Object.entries(featureProperties)) {
  129.         const iFDOKey = guessIFDOKey(featurePropertiesKey);
  130.         const iFDOValue = featurePropertiesValue;
  131.         if (iFDOKey && iFDOValue)
  132.             containerChildrenHTML += getHTMLOfIFDOIcon(iFDOKey, iFDOValue);
  133.     }
  135.     containerElement.innerHTML = containerChildrenHTML;
  136.     containerElement.addEventListener("append", e => {
  137.         containerElement.parentNode.parentNode.classList.add("no-copy");
  138.         containerElement.parentNode.parentNode.setAttribute("data-button-expansion", true);
  139.     })
  141.     return containerElement;
  142. }