client/src/standalone/videos/embed.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>PeerTube</title>
   5
   6     <meta charset="UTF-8">
   7     <meta name="viewport" content="width=device-width, initial-scale=1">
   8
   9     <link rel="icon" type="image/png" href="/client/assets/favicon.png" />
  10
  11     <link rel="stylesheet" href="/client/assets/video-js/video-js.min.css">
  12     <link rel="stylesheet" href="/client/assets/video-js/videojs-dock.css">
  13
  14     <script src="/client/assets/webtorrent/webtorrent.min.js"></script>
  15     <script src="/client/assets/video-js/video.min.js"></script>
  16     <script src="/client/assets/video-js/videojs-dock.min.js"></script>
  17
  18     <style>
  19       video {
  20         width: 99%;
  21       }
  22
  23       /* fill the entire space */
  24       html, body {
  25         height: 100%;
  26         margin: 0;
  27       }
  28
  29       .video-js {
  30         width: 100%;
  31         height: 100%;
  32       }
  33
  34       .vjs-poster {
  35         background-size: 100% auto;
  36       }
  37
  38       .vjs-peertube-link {
  39         color: white;
  40         text-decoration: none;
  41         font-size: 1.3em;
  42         line-height: 2.20;
  43         transition: all .4s;
  44       }
  45
  46       .vjs-peertube-link:hover {
  47         text-shadow: 0 0 1em #fff;
  48       }
  49
  50     </style>
  51   </head>
  52
  53   <body>
  54
  55   <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered">
  56   </video>
  57
  58
  59   <script>
  60   function loadVideoInfos (videoId, callback) {
  61     var xhttp = new XMLHttpRequest()
  62     xhttp.onreadystatechange = function () {
  63       if (this.readyState === 4 && this.status === 200) {
  64         var json = JSON.parse(this.responseText)
  65         return callback(json)
  66       }
  67     }
  68
  69     var url = window.location.origin + '/api/v1/videos/' + videoId
  70     xhttp.open('GET', url, true)
  71     xhttp.send()
  72   }
  73
  74   function loadVideoTorrent (magnetUri) {
  75     console.log('Loading video ' + videoId)
  76     var client = new window.WebTorrent()
  77
  78     console.log('Adding magnet ' + magnetUri)
  79     client.add(magnetUri, function (torrent) {
  80       var file = torrent.files[0]
  81
  82       file.renderTo('video', { autoplay: true })
  83     })
  84   }
  85
  86   var urlParts = window.location.href.split('/')
  87   var videoId = urlParts[urlParts.length - 1]
  88
  89   loadVideoInfos(videoId, function (videoInfos) {
  90     var magnetUri = videoInfos.magnetUri
  91     // FIXME: use poster?
  92     // var videoContainer = document.getElementById('video-container')
  93     // var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath
  94     // videoContainer.poster = thumbnailUrl
  95
  96     videojs('video-container', { controls: true, autoplay: false }, function () {
  97       var player = this
  98
  99       var Button = videojs.getComponent('Button')
 100       var peertubeLinkButton = videojs.extend(Button, {
 101         constructor: function () {
 102           Button.apply(this, arguments)
 103         },
 104
 105         createEl: function () {
 106           var link = document.createElement('a')
 107           link.href = window.location.href.replace('embed', 'watch')
 108           link.innerHTML = 'PeerTube'
 109           link.title = 'Go to the video page'
 110           link.className = 'vjs-peertube-link'
 111
 112           return link
 113         }
 114       })
 115       videojs.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
 116
 117       var controlBar = player.getChild('controlBar')
 118       var addedLink = controlBar.addChild('PeerTubeLinkButton', {})
 119       controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
 120
 121       player.dock({
 122         title: videoInfos.name
 123       })
 124
 125       document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
 126         loadVideoTorrent(magnetUri)
 127
 128         player.play()
 129       }, false)
 130     })
 131   })
 132
 133   </script>
 134   </body>
 135 </html>