From f4c92b5be9a86372f8e9638bb9ec4ab68b332777 Mon Sep 17 00:00:00 2001
From: DC <dcposch@dcpos.ch>
Date: Fri, 18 Nov 2016 15:04:06 -0800
Subject: [PATCH] Torrent Viewer: support fullscreen

---
 app/extensions.js                       |  1 +
 app/filtering.js                        |  7 ++++
 js/webtorrent/components/mediaViewer.js | 56 ++++++++++++++++++++++---
 less/webtorrent.less                    |  4 +-
 4 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/app/extensions.js b/app/extensions.js
index e76cc824d4a..5b5dd8f4fbf 100644
--- a/app/extensions.js
+++ b/app/extensions.js
@@ -162,6 +162,7 @@ let generateBraveManifest = () => {
 let generateTorrentManifest = () => {
   let cspDirectives = {
     'default-src': '\'self\'',
+    'media-src': '\'self\' http://localhost:*',
     'frame-src': 'http://localhost:*',
     'form-action': '\'none\'',
     'referrer': 'no-referrer',
diff --git a/app/filtering.js b/app/filtering.js
index a6cddce6e43..3e4ab069738 100644
--- a/app/filtering.js
+++ b/app/filtering.js
@@ -358,6 +358,13 @@ function registerPermissionHandler (session, partition) {
       return
     }
 
+    // The Torrent Viewer extension is always allowed to show fullscreen media
+    if (permission === 'fullscreen' &&
+      origin.startsWith('chrome-extension://' + config.torrentExtensionId)) {
+      cb(true)
+      return
+    }
+
     // The Brave extension and PDFJS are always allowed to open files in an external app
     if (permission === 'openExternal' && (
       origin.startsWith('chrome-extension://' + config.PDFJSExtensionId) ||
diff --git a/js/webtorrent/components/mediaViewer.js b/js/webtorrent/components/mediaViewer.js
index e32c2eba47c..c8e4598da8d 100644
--- a/js/webtorrent/components/mediaViewer.js
+++ b/js/webtorrent/components/mediaViewer.js
@@ -1,15 +1,54 @@
 const React = require('react')
 
-class MediaViewer extends React.Component {
+const SUPPORTED_VIDEO_EXTENSIONS = [
+  'm4v',
+  'mkv',
+  'mov',
+  'mp4',
+  'ogv',
+  'webm'
+]
+
+const SUPPORTED_AUDIO_EXTENSIONS = [
+  'aac',
+  'mp3',
+  'ogg',
+  'wav',
+  'm4a'
+]
+
+module.exports = class MediaViewer extends React.Component {
   render () {
     const torrent = this.props.torrent
     const ix = this.props.ix
+    const file = torrent.files[ix]
+    const fileExt = file && getExtension(file.name)
+    const isVideo = SUPPORTED_VIDEO_EXTENSIONS.includes(fileExt)
+    const isAudio = SUPPORTED_AUDIO_EXTENSIONS.includes(fileExt)
 
     let content
-    if (torrent.serverURL != null) {
-      content = <iframe src={torrent.serverURL + '/' + ix} sandbox='allow-same-origin' />
-    } else {
+    if (torrent.serverURL == null) {
       content = <div data-l10n-id='torrentLoadingMedia' />
+    } else if (isVideo) {
+      content = (
+        <video
+          src={torrent.serverURL + '/' + ix}
+          autoplay='true'
+          controls='true' />
+      )
+    } else if (isAudio) {
+      content = (
+        <audio
+          src={torrent.serverURL + '/' + ix}
+          autoplay='true'
+          controls='true' />
+      )
+    } else {
+      content = (
+        <iframe
+          src={torrent.serverURL + '/' + ix}
+          sandbox='allow-same-origin' />
+      )
     }
 
     return (
@@ -20,4 +59,11 @@ class MediaViewer extends React.Component {
   }
 }
 
-module.exports = MediaViewer
+// Given 'foo.txt', returns 'txt'
+// Given eg. null, undefined, '', or 'README', returns null
+function getExtension (filename) {
+  if (!filename) return null
+  const ix = filename.lastIndexOf('.')
+  if (ix < 0) return null
+  return filename.substring(ix + 1)
+}
diff --git a/less/webtorrent.less b/less/webtorrent.less
index 4522112ae9f..29eb2c5b618 100644
--- a/less/webtorrent.less
+++ b/less/webtorrent.less
@@ -99,7 +99,9 @@ html,
   height: 100%;
 }
 
-iframe {
+iframe,
+video,
+audio {
   border: 0;
   width: 100%;
   height: 100%;