bootstrap-italia/src/js/plugins/videoplayer.js

Bootstrap Italia è un tema Bootstrap 5 per la creazione di applicazioni web nel pieno rispetto delle linee guida di design per i siti internet e i servizi digitali della PA

import BaseComponent from 'bootstrap/js/src/base-component.js'

import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
import Manipulator from 'bootstrap/js/src/dom/manipulator'
import videojs from 'video.js'

const NAME = 'videoplayer'

const SELECTOR_TOGGLE = '[data-bs-video]'

const itLang = {
  'Audio Player': 'Lettore audio',
  'Video Player': 'Lettore video',
  Play: 'Play',
  Pause: 'Pausa',
  Replay: 'Replay',
  'Current Time': 'Orario attuale',
  Duration: 'Durata',
  'Remaining Time': 'Tempo rimanente',
  'Stream Type': 'Tipo del Streaming',
  LIVE: 'LIVE',
  Loaded: 'Caricato',
  Progress: 'Stato',
  'Progress Bar': 'Barra di avanzamento',
  'progress bar timing: currentTime={1} duration={2}': '{1} di {2}',
  Fullscreen: 'Schermo intero',
  'Exit Fullscreen': 'Chiudi Schermo intero',
  Mute: 'Muto',
  Unmute: 'Audio',
  'Playback Rate': 'Tasso di riproduzione',
  Subtitles: 'Sottotitoli',
  'subtitles off': 'Senza sottotitoli',
  Captions: 'Sottotitoli non udenti',
  'captions off': 'Senza sottotitoli non udenti',
  Chapters: 'Capitolo',
  Descriptions: 'Descrizioni',
  'descriptions off': 'Descrizioni disattivate',
  'Audio Track': 'Traccia audio',
  'Volume Level': 'Livello del volume',
  'You aborted the media playback': 'La riproduzione del filmato è stata interrotta.',
  'A network error caused the media download to fail part-way.': 'Il download del filmato è stato interrotto a causa di un problema rete.',
  'The media could not be loaded, either because the server or network failed or because the format is not supported.':
    'Il filmato non può essere caricato a causa di un errore nel server o nella rete o perché il formato non viene supportato.',
  'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.':
    'La riproduzione del filmato è stata interrotta a causa di un file danneggiato o per l’utilizzo di impostazioni non supportate dal browser.',
  'No compatible source was found for this media.': 'Non ci sono fonti compatibili per questo filmato.',
  'The media is encrypted and we do not have the keys to decrypt it.': 'Il contenuto multimediale è criptato e non disponiamo delle chiavi per decifrarlo.',
  'Play Video': 'Riprduci il video',
  Close: 'Chiudi',
  'Close Modal Dialog': 'Chiudi la finestra di dialogo',
  'Modal Window': 'Finestra di dialogo',
  'This is a modal window': 'Questa è una finestra di dialogo',
  'This modal can be closed by pressing the Escape key or activating the close button.':
    'Questa finestra di dialogo può essere chiusa premendo sul tasto Esc o attivando il pulsante di chiusura.',
  ', opens captions settings dialog': ', aprire i parametri della trascrizione dei sottotitoli',
  ', opens subtitles settings dialog': ', aprire i parametri dei sottotitoli',
  ', opens descriptions settings dialog': ', aprire i parametri delle descrizioni',
  ', selected': ', selezionato',
  'captions settings': 'Parametri della trascrizione dei sottotitoli',
  'subtitles settings': 'Parametri dei sottotitoli',
  'descriptions settings': 'Parametri delle descrizioni',
  Text: 'Testo',
  White: 'Bianco',
  Black: 'Nero',
  Red: 'Rosso',
  Green: 'Verde',
  Blue: 'Blu',
  Yellow: 'Giallo',
  Magenta: 'Magenta',
  Cyan: 'Ciano',
  Background: 'Sfondo',
  Window: 'Finestra',
  Transparent: 'Trasparente',
  'Semi-Transparent': 'Semi-Trasparente',
  Opaque: 'Opaco',
  'Font Size': 'Dimensione dei caratteri',
  'Text Edge Style': 'Stile dei bordi del testo',
  None: 'Nessuno',
  Uniform: 'Uniforme',
  Dropshadow: 'Ombreggiatura',
  'Font Family': 'Famiglia di caratteri',
  'Proportional Sans-Serif': 'Carattere a spaziatura variabile senza grazie (Proportional Sans-Serif)',
  'Monospace Sans-Serif': 'Carattere a spaziatura fissa senza grazie (Monospace Sans-Serif)',
  'Proportional Serif': 'Carattere a spaziatura variabile con grazie (Proportional Serif)',
  'Monospace Serif': 'Carattere a spaziatura fissa con grazie (Monospace Serif)',
  'Small Caps': 'Maiuscoletto',
  Reset: 'Reinizializza',
  'restore all settings to the default values': 'Ripristina i valori predefiniti per tutti i parametri',
  Done: 'Operazione completata',
  'Caption Settings Dialog': 'Finestra di dialogo dei parametri della trascrizione dei sottotitoli',
  'Beginning of dialog window. Escape will cancel and close the window.':
    'Inizio della finestra di dialogo. Il tasto Esc annullerà l’operazione e chiuderà la finestra.',
  'End of dialog window.': 'Fine della finestra di dialogo.',
  '{1} is loading.': '{1} in fase di caricamento.',
  'Exit Picture-in-Picture': 'Esci dalla modalità Picture-in-Picture',
  'Picture-in-Picture': 'Picture-in-Picture',
}

const DEFAULT_CONFIG = { languages: { it: itLang }, language: 'it' }

const Default = {}

window.videojs = videojs

class VideoPlayer extends BaseComponent {
  constructor(element, config) {
    super(element)
    element.classList.add('video-js', 'vjs-theme-bootstrap-italia', 'vjs-fluid', 'vjs-big-play-centered')
    this._config = this._getConfig(config)

    this.player = videojs(element, DEFAULT_CONFIG)
  }

  // Public

  setYouTubeVideo(url) {
    this.player.tech('youtube')
    this.player.src({ type: 'video/youtube', src: url })
  }

  // Getters

  static get NAME() {
    return NAME
  }

  // Private
  _getConfig(config) {
    config = {
      ...Default,
      ...Manipulator.getDataAttributes(this._element),
      ...(typeof config === 'object' ? config : {}),
    }
    return config
  }
}

/**
 * ------------------------------------------------------------------------
 * Data Api implementation
 * ------------------------------------------------------------------------
 */

const players = SelectorEngine.find(SELECTOR_TOGGLE)
if (players.length > 0) {
  players.forEach((player) => {
    VideoPlayer.getOrCreateInstance(player)
  })
}

export default VideoPlayer