Initial commit

webrecorder · Dec 16, 2016 · b63b1b5 · b63b1b5
commit b63b1b5
Show file tree

Hide file tree

Showing 9 changed files with 274 additions and 0 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,13 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceRoot}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "program": "${workspaceRoot}/main.js"
+    }
+  ]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,13 @@
+# webarchiveplayer electron
+
+1. install electron and required npm modules
+
+    	npm install
+
+2. copy a standalone binary version of pywb in `python-binaries`
+
+3. copy the Pepperflashplayer plugin of a local Chrome/Chromium in `plugins`
+
+4. start
+
+    	npm start
diff --git a/images/webrecorder-logo.jpeg b/images/webrecorder-logo.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>webarchiveplayer</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+
+  <div id="control-bar">
+      <button id="warc" class="button">open a warc</button>
+      <input id="url" type="text" class="input_text" size="100">
+      <input id="date" type="text" class="input_text" size="30">
+  </div>
+
+  <webview id="replay" src="about:_blank" autosize="on"></webview>
+
+</body>
+
+<script>
+    require('./renderer.js')
+</script>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,89 @@
+const electron = require('electron');
+const app = electron.app;
+const BrowserWindow = electron.BrowserWindow;
+const ipcMain = electron.ipcMain
+
+const path = require('path')
+const url = require('url')
+const rq = require('request-promise');
+
+const portfinder = require('portfinder');
+portfinder.basePort = 8090;
+
+let mainWindow
+let pywb_process
+
+let pluginName
+let pluginDir = "plugins"
+switch (process.platform) {
+  case 'win32':
+    pluginName = 'pepflashplayer.dll'
+    break
+  case 'darwin':
+    pluginName = 'PepperFlashPlayer.plugin'
+    break
+  case 'linux':
+    pluginName = 'libpepflashplayer.so'
+    break
+}
+app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, pluginDir ,pluginName))
+
+var openWarc = function () {
+  ipcMain.on('open-warc', (event, argument) => {
+    const warc = argument;
+    console.log(`warc file: ${warc}`);
+    const pywb = path.join(__dirname, 'python-binaries', 'webarchiveplayer');
+
+    if (pywb_process){
+          pywb_process.kill('SIGINT');
+    }
+
+    portfinder.getPort(function (err, port) {
+      pywb_process = require('child_process').spawn(pywb, ["--port", port, warc]);
+      console.log(`pywb is listening on: http://localhost:${port} (pid ${pywb_process.pid}) `);
+      loadWebview(port);
+    });
+
+    var loadWebview = function (port) {
+        rq(`http://localhost:${port}`).then(function() {
+        mainWindow.webContents.send('loadWebview', `http://localhost:${port}/`);
+      }).catch(function(err) {
+        loadWebview(port);
+      });
+    }
+  });
+
+}
+
+
+var createWindow = function () {
+  mainWindow = new BrowserWindow({
+    width: 1000,
+    height: 800,
+    webPreferences: {
+      plugins: true
+    }
+  });
+
+  mainWindow.loadURL(url.format({
+    pathname: path.join(__dirname, 'index.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+
+  // mainWindow.webContents.openDevTools()
+
+  mainWindow.on('closed', function () {
+    mainWindow = null;
+    pywb_process.kill('SIGINT');
+  });
+}
+
+app.on('ready', function () {
+  createWindow();
+  openWarc();
+});
+
+app.on('window-all-closed', function () {
+  app.quit();
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "webarchiveplayer-electron",
+  "version": "0.0.1",
+  "description": "webarchiveplayer - standalone warc viewer",
+  "main": "main.js",
+  "scripts": {
+    "start": "node_modules/.bin/electron ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhizomedotorg/webarchiveplayer-electron.git"
+  },
+  "keywords": [
+    "warc",
+    "webarchives",
+    "electron",
+    "pywb"
+  ],
+  "author": "webrecorder/rhizome",
+  "license": "Apache",
+  "bugs": {
+    "url": "https://github.com/rhizomedotorg/webarchiveplayer-electron/issues"
+  },
+  "homepage": "https://github.com/rhizomedotorg/webarchiveplayer-electron#readme",
+  "dependencies": {
+    "portfinder": "^1.0.10",
+    "request": "^2.79.0",
+    "request-promise": "^4.1.1",
+    "electron": "^1.4.12"
+  }
+}
diff --git a/plugins/README.md b/plugins/README.md
@@ -0,0 +1,12 @@
+copy here the external plugins
+----
+
+PepperFlash
+
+* windows 
+
+		C:\Users\${USER}\AppData\Local\Google\Chrome\User Data\PepperFlash\23.0.0.207/pepflashplayer.dll
+
+* osx
+
+		/Users/${USER}/Library/Application Support/Google/Chrome Canary/PepperFlash/24.0.0.175/PepperFlashPlayer.plugin
diff --git a/renderer.js b/renderer.js
@@ -0,0 +1,51 @@
+const electron = require('electron')
+const ipcRenderer = electron.ipcRenderer
+const dialog = electron.remote.dialog
+
+/*
+button open warc
+	display a file selector and call ipc "open-warc" on main
+*/
+document.getElementById('warc').addEventListener('click', _ => {
+	dialog.showOpenDialog({
+		properties: ['openFile'],
+		filters: [
+			{ name: 'Warc', extensions: ['gz'] },
+		],
+	}, function (filename) {
+		ipcRenderer.send('open-warc', filename.toString());
+	})
+})
+
+/*
+renderer ipc "loadWebview"
+	called by main after pywb is executed
+	load a url into webview
+*/
+ipcRenderer.on('loadWebview', (event, message) => {
+	replay_webview.loadURL(message);
+})
+
+/*
+listeners to DOM events of the webview #replay
+http://electron.atom.io/docs/api/web-view-tag/#dom-events
+
+	load-commit: Fired when a load has committed
+	update the url and the date in the control bar
+
+*/
+const replay_webview = document.getElementById('replay')
+replay_webview.addEventListener('load-commit', () => {
+	replayed_url = require('url').parse(replay_webview.getURL()).path
+
+	const regex = /(\d+)\/(.*)/g
+	parts = regex.exec(replayed_url)
+	const date = parts[1]
+	const url = parts[2]
+
+	document.getElementById('url').value = url
+
+	archival_date = new Date(date.replace(/^(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)(\d\d)$/,'$4:$5:$6 $2/$3/$1'));
+	document.getElementById('date').value = `${archival_date.toLocaleDateString()} - ${archival_date.toLocaleTimeString()}`
+
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,39 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+#control-bar {
+  position: fixed;
+  width: 80%;
+  margin-left: 10% ;
+  margin-right: 10% ;
+  background-color: #FFF;
+  border: 1px solid #2F4BCE;
+  border-top: 0;
+  padding: 10px; 
+}
+
+webview.show{
+  display: block;
+}
+webview{
+  width: 100%;
+  height: 100%;
+}
+
+.button { 
+	font-size:.6em; 
+	border: 1px solid #ccc; 
+	background-color: #2F4BCE; 
+	color: white; 
+	padding: 8px;
+}
+
+.input_text {
+  font-size: .6em;
+  padding: 7px;
+}
+