Add context menu to player

5 files changed, 75 insertions, 16 deletions

diff --git a/client/src/assets/player/peertube-link-button.ts b/client/src/assets/player/peertube-link-button.ts
index 54d802732..a13815d61 100644
--- a/client/src/assets/player/peertube-link-button.ts
+++ b/client/src/assets/player/peertube-link-button.ts
@@ -1,15 +1,19 @@
 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { buildVideoLink } from './utils'
 
 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
 class PeerTubeLinkButton extends Button {
 
+  constructor (player: videojs.Player, options) {
+    super(player, options)
+  }
+
   createEl () {
     return this.buildElement()
   }
 
   updateHref () {
-    const currentTime = Math.floor(this.player().currentTime())
-    this.el().setAttribute('href', this.buildHref(currentTime))
+    this.el().setAttribute('href', buildVideoLink(this.player().currentTime()))
   }
 
   handleClick () {
@@ -18,7 +22,7 @@ class PeerTubeLinkButton extends Button {
 
   private buildElement () {
     const el = videojsUntyped.dom.createEl('a', {
-      href: this.buildHref(),
+      href: buildVideoLink(),
       innerHTML: 'PeerTube',
       title: 'Go to the video page',
       className: 'vjs-peertube-link',
@@ -29,15 +33,5 @@ class PeerTubeLinkButton extends Button {
 
     return el
   }
-
-  private buildHref (time?: number) {
-    let href = window.location.href.replace('embed', 'watch')
-    if (time) {
-      if (window.location.search) href += '&start=' + time
-      else href += '?start=' + time
-    }
-
-    return href
-  }
 }
 Button.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index f419d58fc..9fe5af569 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -2,12 +2,15 @@ import { VideoFile } from '../../../../shared/models/videos'
 
 import 'videojs-hotkeys'
 import 'videojs-dock'
+import 'videojs-contextmenu'
+import 'videojs-contextmenu-ui'
 import './peertube-link-button'
 import './resolution-menu-button'
 import './settings-menu-button'
 import './webtorrent-info-button'
 import './peertube-videojs-plugin'
 import { videojsUntyped } from './peertube-videojs-typings'
+import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
@@ -16,6 +19,7 @@ function getVideojsOptions (options: {
   autoplay: boolean,
   playerElement: HTMLVideoElement,
   videoViewUrl: string,
+  videoEmbedUrl: string,
   videoDuration: number,
   videoFiles: VideoFile[],
   enableHotkeys: boolean,
@@ -38,6 +42,29 @@ function getVideojsOptions (options: {
         videoViewUrl: options.videoViewUrl,
         videoDuration: options.videoDuration,
         startTime: options.startTime
+      },
+      contextmenuUI: {
+        content: [
+          {
+            label: 'Copy the video URL',
+            listener: function () {
+              copyToClipboard(buildVideoLink())
+            }
+          },
+          {
+            label: 'Copy the video URL at the current time',
+            listener: function () {
+              const player = this
+              copyToClipboard(buildVideoLink(player.currentTime()))
+            }
+          },
+          {
+            label: 'Copy embed code',
+            listener: () => {
+              copyToClipboard(buildVideoEmbed(options.videoEmbedUrl))
+            }
+          }
+        ]
       }
     },
     controlBar: {
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index d9ded7a7e..65103f3ab 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -268,6 +268,10 @@ class PeerTubePlugin extends Plugin {
     this.trigger('autoResolutionUpdate')
   }
 
+  getCurrentVideoFile () {
+    return this.currentVideoFile
+  }
+
   private tryToPlay (done?: Function) {
     if (!done) done = function () { /* empty */ }
 
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index 1df39d4e4..487b3a1be 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -64,14 +64,48 @@ function isMobile () {
   return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 }
 
+function buildVideoLink (time?: number) {
+  let href = window.location.href.replace('/embed/', '/watch/')
+  if (time) {
+    const timeInt = Math.floor(time)
+
+    if (window.location.search) href += '&start=' + timeInt
+    else href += '?start=' + timeInt
+  }
+
+  return href
+}
+
+function buildVideoEmbed (embedUrl: string) {
+  return '<iframe width="560" height="315" ' +
+    'src="' + embedUrl + '" ' +
+    'frameborder="0" allowfullscreen>' +
+    '</iframe>'
+}
+
+function copyToClipboard (text: string) {
+  const el = document.createElement('textarea')
+  el.value = text
+  el.setAttribute('readonly', '')
+  el.style.position = 'absolute'
+  el.style.left = '-9999px'
+  document.body.appendChild(el)
+  el.select()
+  document.execCommand('copy')
+  document.body.removeChild(el)
+}
+
 export {
   toTitleCase,
+  buildVideoLink,
   getStoredVolume,
   saveVolumeInStore,
   saveAverageBandwidth,
   getAverageBandwidth,
   saveMuteInStore,
+  buildVideoEmbed,
   getStoredMute,
+  copyToClipboard,
   isMobile,
   bytes
 }
diff --git a/client/src/assets/player/video-renderer.ts b/client/src/assets/player/video-renderer.ts
index 4b54b661a..4affb43cf 100644
--- a/client/src/assets/player/video-renderer.ts
+++ b/client/src/assets/player/video-renderer.ts
@@ -50,7 +50,7 @@ function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, ca
 
       return fallbackToMediaSource()
     })
-    preparedElem.addEventListener('canplay', onLoadStart)
+    preparedElem.addEventListener('loadstart', onLoadStart)
     return videostream(file, preparedElem)
   }
 
@@ -66,7 +66,7 @@ function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, ca
 
       return callback(err)
     })
-    preparedElem.addEventListener('canplay', onLoadStart)
+    preparedElem.addEventListener('loadstart', onLoadStart)
 
     const wrapper = new MediaElementWrapper(preparedElem)
     const writable = wrapper.createWriteStream(codecs)
@@ -95,7 +95,7 @@ function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, ca
   }
 
   function onLoadStart () {
-    preparedElem.removeEventListener('canplay', onLoadStart)
+    preparedElem.removeEventListener('loadstart', onLoadStart)
     if (opts.autoplay) preparedElem.play()
 
     callback(null, renderer)