client/src/assets/player/videojs-components/peertube-link-button.ts

   1 import videojs from 'video.js'
   2 import { PeerTubeLinkButtonOptions } from '../peertube-videojs-typings'
   3 import { buildVideoLink, decorateVideoLink } from '../utils'
   4
   5 const Button = videojs.getComponent('Button')
   6 class PeerTubeLinkButton extends Button {
   7   private shortUUID: string
   8
   9   constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) {
  10     super(player, options as any)
  11   }
  12
  13   createEl () {
  14     return this.buildElement()
  15   }
  16
  17   updateHref () {
  18     this.el().setAttribute('href', this.buildLink())
  19   }
  20
  21   handleClick () {
  22     this.player().pause()
  23   }
  24
  25   private buildElement () {
  26     const el = videojs.dom.createEl('a', {
  27       href: this.buildLink(),
  28       innerHTML: 'PeerTube',
  29       title: this.player().localize('Video page (new window)'),
  30       className: 'vjs-peertube-link',
  31       target: '_blank'
  32     })
  33
  34     el.addEventListener('mouseenter', () => this.updateHref())
  35
  36     return el as HTMLButtonElement
  37   }
  38
  39   private buildLink () {
  40     const url = buildVideoLink({ shortUUID: this.shortUUID })
  41
  42     return decorateVideoLink({ url, startTime: this.player().currentTime() })
  43   }
  44 }
  45
  46 videojs.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)