Phase 2

Stream Play Support for magnet links - Paste and hit enter to begin streaming.
universalweb · May 5, 2020 · 788379e · 788379e
1 parent 814202a
commit 788379e
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 48 deletions.
diff --git a/browser/resources/html/template/browser.html b/browser/resources/html/template/browser.html
@@ -1,22 +1,10 @@
 <nav class="uk-navbar-container uk-margin browserControls" uk-navbar>
   <ul class="uk-navbar-nav">
     <li>
-      <a href="#"
-        ><span
-          class="uk-icon"
-          uk-icon="icon:  chevron-left"
-          on-click="backward"
-        ></span
-      ></a>
+      <a href="#"><span class="uk-icon" uk-icon="icon:  chevron-left" on-click="backward"></span></a>
     </li>
     <li>
-      <a href="#"
-        ><span
-          class="uk-icon"
-          uk-icon="icon:  chevron-right"
-          on-click="forward"
-        ></span
-      ></a>
+      <a href="#"><span class="uk-icon" uk-icon="icon:  chevron-right" on-click="forward"></span></a>
     </li>
     <li>
       <a href="#">
@@ -29,14 +17,29 @@
       </a>
     </li>
   </ul>
-  <input
-    class="uk-input uk-width-expand"
-    type="text"
-    placeholder="Website URL"
-    value="{{newURL}}"
-    on-keyup="urlbar"
-  />
+  <input class="uk-input uk-width-expand" type="text" placeholder="Website URL" value="{{newURL}}" on-keyup="urlbar" />
+  <ul class="uk-navbar-nav">
+    <li>
+      <a href="#modal-torrent" uk-toggle><span class="uk-icon" uk-icon="icon:  download"></span></a>
+    </li>
+  </ul>
 </nav>
 {{#if load}}
-<webview src="{{url}}" disablewebsecurity plugins></webview>
-{{/if}} {{#if torrentMode}} {{/if}}
+  <webview src="{{url}}" disablewebsecurity plugins></webview>
+{{/if}}
+<div id="modal-torrent" class="uk-modal-full" uk-modal>
+  <div class="uk-modal-dialog">
+    <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
+    <div class="uk-modal-header">
+      <h2 class="uk-modal-title">{{torrent.title}}</h2>
+    </div>
+    <div class="uk-modal-body">
+      <div class="uk-margin">
+        <input value="{{torrent.magnet}}" class="uk-input" type="text" placeholder="Paste magnet link then hit enter"
+          on-keyup="magnetStream">
+      </div>
+      <hr class="uk-divider-icon">
+      <div id="torrentView"></div>
+    </div>
+  </div>
+</div>
diff --git a/browser/resources/js/index.js b/browser/resources/js/index.js
@@ -2,29 +2,37 @@
 	const config = require('./config');
 	const ractive = globalThis.Ractive;
 	const torrent = require('./browser/torrent/');
+	const figlet = require('figlet');
 	const {
 		readFileSync
 	} = require('fs');
 	const template = readFileSync('./browser/resources/html/template/browser.html').toString();
-	function onrender() {
-		const webview = document.querySelector('webview');
-		const that = this;
-		webview.addEventListener('did-stop-loading', async (e) => {
-			const src = webview.src;
-			console.log(src, e);
-			await that.set('newURL', src);
-			await that.set('url', src);
-		});
-	}
+	const {
+		homepage,
+		devMode
+	} = config.browser;
 	const mainComponent = ractive({
 		target: 'body',
 		template,
 		data: {
-			newURL: config.homepage,
-			url: config.homepage,
-			load: true
+			newURL: homepage,
+			url: homepage,
+			load: true,
+			torrent: {
+				title: 'Torrent & Stream',
+				magnet: ''
+			}
 		},
-		onrender
+		onrender() {
+			const webview = document.querySelector('webview');
+			const that = this;
+			webview.addEventListener('did-stop-loading', async (e) => {
+				const src = webview.src;
+				console.log(src, e);
+				await that.set('newURL', src);
+				await that.set('url', src);
+			});
+		}
 	});
 	window.view = mainComponent;
 	mainComponent.on({
@@ -34,7 +42,7 @@
 			await mainComponent.set('load', true);
 			console.log('LOADING URL');
 			console.log(`URL: ${url}`);
-			if (config.devMode) {
+			if (devMode) {
 				setTimeout(() => {
 					document.querySelector('webview').openDevTools();
 				}, 500);
@@ -58,16 +66,28 @@
 				this.fire('loadURL');
 				console.log(componentEvent);
 			}
+		},
+		magnetStream(componentEvent) {
+			if (componentEvent.original.keyCode === 13) {
+				const magnet = this.get('torrent.magnet');
+				torrent.streamPlay(magnet, '#torrentView');
+				console.log(componentEvent);
+			}
 		}
 	});
 	mainComponent.observe('url', async (newValue) => {
 		await mainComponent.set('newURL', newValue);
 	});
 	torrent.events(mainComponent);
-	if (config.devMode) {
+	if (devMode) {
 		setTimeout(() => {
 			document.querySelector('webview').openDevTools();
 		}, 500);
 	}
 	console.log('MainBrowser Component', ractive);
+	figlet('SNTVT', (err, data) => {
+		if (!err) {
+			console.log(data);
+		}
+	});
 })();
diff --git a/browser/torrent/index.js b/browser/torrent/index.js
@@ -70,6 +70,18 @@ const methods = {
 	get ratio() {
 		return client.ratio;
 	},
+	streamPlay(torrentId, domSelector) {
+		return promise((accept) => {
+			client.add(torrentId, (torrent) => {
+				const streamFile = torrent.files.find((file) => {
+					const extCheck = file.name.endsWith('.mp4') || file.name.endsWith('.mkv') || file.name.endsWith('.m4v');
+					return extCheck && !file.name.includes('sample');
+				});
+				streamFile.appendTo(domSelector);
+				accept(torrent);
+			});
+		});
+	},
 	events,
 };
 module.exports = methods;
diff --git a/config/index.js b/config/index.js
@@ -1,4 +1,10 @@
 module.exports = {
-	devMode: true,
-	homepage: 'https://social.sentivate.com'
+	mainDev: true,
+	browser: {
+		homepage: 'https://social.sentivate.com',
+		devMode: true,
+	},
+	torrent: {
+		downloadDirectory: false,
+	}
 };
diff --git a/index.html b/index.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-  <html>
+<html>
+
   <head>
-    <title>Universal Web Browser by Sentivate</title>
+    <title>Gravity - Universal Web Browser - Sentivate</title>
     <script type="text/javascript">
       globalThis = window;
     </script>
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width" />
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <!--RESET-->
     <link rel="stylesheet" href="./browser/resources/css/reset.css" />
@@ -18,9 +19,12 @@
     <script src="./browser/resources/js/uikitIcons.js"></script>
     <!-- RACTIVE (REACTIVE COMPONENTS) & LUCY(UTILITY LIBRARY) JavaScript -->
     <script src="./browser/resources/js/ractive.js"></script>
-    <script src="./browser/resources/js/utility.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,500;0,900;1,500;1,900&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet">
   </head>
+
   <body id="body"></body>
   <script src="./browser/resources/js/index.js" async></script>
-</html>
+
+</html>
diff --git a/main.js b/main.js
@@ -5,6 +5,7 @@
 		});
 	}
 	const path = require('path');
+	const config = require('./config');
 	const universalWebSocket = require('./browser/protocol/');
 	const state = {
 		electron: require('electron'),
@@ -136,7 +137,9 @@
 			mainWindow.on('closed', () => {
 				mainWindow = null;
 			});
-			mainWindow.webContents.openDevTools();
+			if (config.mainDev) {
+				mainWindow.webContents.openDevTools();
+			}
 		}
 		app.on('ready', async () => {
 			await universalWebSocket(state);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "babel-eslint": "*",
     "chalk": "^4.0.0",
     "eslint": "*",
+    "figlet": "^1.4.0",
     "is-valid-path": "*",
     "node-appletv": "^1.1.0",
     "node-watch": "^0.6.4",