Merge pull request #2 from jeffmikels/electron

Electron
jeffmikels · Mar 16, 2022 · a6ebcf7 · a6ebcf7
2 parents 17d4fb1 + 7a3b585
commit a6ebcf7
Show file tree

Hide file tree

Showing 11 changed files with 1,185 additions and 149 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,5 @@
 # vMix Snapshot Proxy
 
-
 vMix has a robust API, but one key limitation of the API is that while you can
 tell vMix to take a snapshot of an input, it will save the image on the vMix
 machine but not send the image over the network.
@@ -10,11 +9,10 @@ for those images.
 
 The application is especially helpful in providing preview images of each input for
 
-[Unofficial vMix Remote Control](https://play.google.com/store/apps/details?id=org.jeffmikels.vmix_remote)
-
-
+[Unofficial vMix Remote Control for Android](https://play.google.com/store/apps/details?id=org.jeffmikels.vmix_remote)
+[Unofficial vMix Remote Control for iOS](https://apps.apple.com/us/app/unofficial-vmix-remote-control/id1551404035)
 
-## Installation
+## Installation for Advanced Users
 
 These commands should be run on the same computer that is running vMix.
 
@@ -53,4 +51,4 @@ Open a browser and visit:
 
 `http://[PROXY_IP_ADDRESS]:8098/[INPUT_NUMBER].jpg`
 
-Every time you visit that address, you will receive a new snapshot image of the selected input.
+Every time you visit that address, you will receive a new snapshot image of the selected input.
diff --git a/build-win.sh b/build-win.sh
@@ -0,0 +1,25 @@
+#!/bin/bash
+
+# this process assembles the electron app manually
+# assuming the binary has already been downloaded into the release directory
+
+TARGET=release/vmix-snapshot-proxy/resources/app
+if [[ ! -d $TARGET ]]; then mkdir "$TARGET"; fi
+rm -rf $TARGET/*
+mkdir "$TARGET/lib"
+
+install() {
+	cp "$1" "$TARGET/$1"
+}
+
+install package.json
+install main.js
+install preload.js
+install renderer.js
+install index.html
+install lib/vue.js
+
+# install node_modules
+pushd "$TARGET"
+npm i --production
+popd
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+		<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
+		<!-- <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
+		<!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> -->
+		<link rel="stylesheet" type="text/css" href="./style.css" />
+		<title>vMix Snapshot Proxy</title>
+	</head>
+	<body>
+		<div id="app">
+			<div id="status" :class="status">{{status}}</div>
+			<h1>vMix Snapshot Proxy</h1>
+
+      <h2>Instructions: <button @click="show_instructions = !show_instructions">{{show_instructions? 'HIDE':'SHOW'}}</button></h2>
+			<div id="instructions" v-if="show_instructions">
+				<ul>
+					<li>This app should be running on the same computer that's running vMix.</li>
+					<li>vMix Settings must enable remote access over port 8088.</li>
+					<li>You must configure the vMix Storage directory and select it here.</li>
+				</ul>
+			</div>
+
+      <h2>Server Settings: <button @click="show_status = !show_status">{{show_status? 'HIDE':'SHOW'}}</button></h2>
+			<div v-if="show_status">
+        <div>
+          <label for="storage_dir">vMix Storage Directory: </label>
+          <input name="storage_dir" id="storage_dir" v-model="storage_dir" @change="updateStorageDir" style="width: 100%" />
+        </div>
+				<p><pre>{{msg}}</pre></p>
+			</div>
+
+      <h2>Debug: <button @click="show_debug = !show_debug">{{show_debug? 'HIDE':'SHOW'}}</button></h2>
+			<div v-if="show_debug">
+				<p><pre>{{output}}</pre></p>
+			</div>
+
+      <h2>Inputs: <button @click="show_inputs = !show_inputs">{{show_inputs? 'HIDE':'SHOW'}}</button></h2>
+			<p v-if="loading">loading inputs...</p>
+			<div id="inputs" v-if="show_inputs" >
+				<div v-for="input in inputs" class="input">
+					<img class="preview" v-if="input.url" v-bind:src="input.url" alt="" />
+					<div class="preview" v-if="!input.url">&nbsp;</div>
+					<div class="caption">{{input.number}}. {{input.text}}</div>
+				</div>
+			</div>
+		</div>
+		<script src="./lib/vue.js"></script>
+		<script src="./renderer.js"></script>
+	</body>
+</html>
diff --git a/lib/vue.js b/lib/vue.js