wonderunit · ghost · Nov 4, 2020 · Nov 4, 2020 · Nov 5, 2020 · Nov 5, 2020
diff --git a/configs/headless-render/webpack.config.js b/configs/headless-render/webpack.config.js
@@ -0,0 +1,43 @@
+const path = require('path')
+const webpack = require('webpack')
+
+module.exports = {
+  entry: './src/js/windows/headless-render/window.js',
+  target: 'electron-main',
+  output: {
+    path: path.resolve(__dirname, './../../src/build'),
+    filename: 'headless-render.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  targets: { electron: require('electron/package.json').version }
+                }
+              ],
+              '@babel/preset-react'
+            ],
+            plugins: ['@babel/plugin-proposal-class-properties']
+          }
+        }
+      }
+    ]
+  },
+  node: {
+    __dirname: false,
+    __filename: false
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      'THREE': 'three'
+    })
+  ]
+}
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "start:ar": "webpack --mode=development --watch --progress --config configs/ar/webpack.config.js",
     "start:shot-generator": "webpack --mode=development --watch --progress --config configs/shot-generator/webpack.config.js",
     "start:shot-explorer": "webpack --mode=development --watch --progress --config configs/shot-explorer/webpack.config.js",
+    "start:headless-render": "webpack --mode=development --watch --progress --config configs/headless-render/webpack.config.js",
     "start:server": "cd server && npm run start",
     "start:electron": "cross-env NODE_ENV=development electron .",
     "start:language-preferences": "webpack --mode=development --watch --progress --config configs/language-preferences/webpack.config.js",
@@ -27,6 +28,7 @@
     "build-thumbnails": "electron test/views/thumbnail-renderer/main.js",
     "build:shot-generator": "webpack --mode=production --progress --config configs/shot-generator/webpack.config.js",
     "build:shot-explorer": "webpack --mode=production --progress --config configs/shot-explorer/webpack.config.js",
+    "build:headless-render": "webpack --mode=production --progress --config configs/headless-render/webpack.config.js",
     "build:xr": "webpack --mode=production --progress --config configs/xr/webpack.config.js",
     "build:ar": "webpack --mode=production --progress --config configs/ar/webpack.config.js",
     "build:server": "cd server && npm run build",
@@ -225,6 +227,7 @@
     "pdfjs-dist": "2.0.550",
     "pdfkit": "^0.9.0",
     "peerjs": "^1.3.1",
+    "peerjs-js-binarypack": "^1.0.1",
     "plist": "2.1.0",
     "postfix-calculator": "0.0.2",
     "promise-cancelable": "2.1.1",

diff --git a/src/aspect-settings.html b/src/aspect-settings.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="./css/fonts.css">
+    <link rel="stylesheet" href="./css/welcome.css">
+    <title>aspect settings</title>
+
+    <style>
+      #new-window {
+        line-height: 1.4;
+      }
+
+      .tab {
+        display: none;
+      }
+
+      .examples {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        grid-gap: 0;
+      }
+      .examples > div {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        border-radius: 6px;
+        padding: 12px 6px;
+      }
+      .examples > div:hover {
+        background-color: #efefef;
+      }
+      .examples > div > div:not(:last-child) {
+        text-align: center;
+        font-size: 13px;
+        /*flex: 1;*/
+      }
+      .examples > div > div:last-child {
+        padding-top: 10px;
+        flex: 1;
+      }
+      .example-display {
+        background: #3a3a3a;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="new-window">
+      <div class="tab" style="display: block;">
+        <h1 style="margin-top: 50px;" id="aspect-title">What Aspect Ratio?</h1>
+
+        <div class="examples">
+          <div class="example" data-aspect-ratio="2.39">
+            <div id="aspect-ultrawide">Ultrawide</div>
+            <div>2.39:1</div>
+            <div>
+              <div class="example-display" style="padding-bottom: calc(100% / 2.39)"></div>
+            </div>
+          </div>
+          <div class="example" data-aspect-ratio="2">
+            <div id="aspect-doublewide">Doublewide</div>
+            <div>2.00:1</div>
+            <div>
+              <div class="example-display" style="padding-bottom: calc(100% / 2.00)"></div>
+            </div>
+          </div>
+          <div class="example" data-aspect-ratio="1.85">
+            <div id="aspect-wide">Wide</div>
+            <div>1.85:1</div>
+            <div>
+              <div class="example-display" style="padding-bottom: calc(100% / 1.85)"></div>
+            </div>
+          </div>
+          <div class="example" data-aspect-ratio="1.7777777777777777">
+            <div id="aspect-hd">HD</div>
+            <div>16:9</div>
+            <div>
+              <div class="example-display" style="padding-bottom: calc(100% * (9 / 16))"></div>
+            </div>
+          </div>
+          <div class="example" data-aspect-ratio="0.5625">
+            <div id="aspect-vertical-hd">Vertical HD</div>
+            <div>9:16</div>
+            <div>
+              <div class="example-display" style="padding-bottom: calc(100% * (16 / 9))"></div>
+            </div>
+          </div>
+          <div class="example" data-aspect-ratio="1">
+            <div id="aspect-square">Square</div>
+            <div>1:1</div>
+            <div>
+              <div class="example-display" style="padding-bottom: calc(100% * 1)"></div>
+            </div>
+          </div>
+          <div class="example" data-aspect-ratio="1.3333333333333333">
+            <div id="aspect-old">Old</div>
+            <div>4:3</div>
+            <div>
+              <div class="example-display" style="padding-bottom: calc(100% * (3 / 4))"></div>
+            </div>
+          </div>
+        </div>
+
+
+        <div style="margin-top: 24px;">
+          <p id="aspect-description">
+            The aspect ratio defines the size of your boards.<br/><br/>
+            2.39:1 is the widest, like what you would watch in a movie.<br/>
+            16:9 is what you would watch on a modern TV.<br/>
+            4:3 is what your grandpops watched back when screens flickered and programming was wholesome.<br/><br/>
+            Please don't select vertical HD. We added it as a joke.<br/>
+          </p>
+        </div>
+      </div>
+
+    </div>
+  </body>
+  <script>
+      require('./js/windows/aspect-settings/window.js')
+  </script>
+</html>
diff --git a/src/css/preferences.css b/src/css/preferences.css
@@ -168,8 +168,13 @@ a.button:hover {
   position: relative;
   display: relative;
 }
+.open-aspect-settings {
+  position: relative;
+  display: relative;
+}
 
-.open-language-editor button {
+.open-language-editor button,
+.open-aspect-settings button {
   background-color: #333333;
   color: white;
   padding: 12px;

diff --git a/src/css/shot-explorer.css b/src/css/shot-explorer.css
@@ -112,4 +112,26 @@ img, a{ -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /*
   height: 70px;
   font-size: 18px;
   color: #9d9d9d;
+}
+
+.camera-view {
+  height: 100%;
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background-color: #111114;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.camera-view-view {
+  position: relative;
+  overflow: hidden;
+  background-color: #111114;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/headless-render.html b/src/headless-render.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="./css/fonts.css">
+    <link rel="stylesheet" href="./css/shot-explorer.css">
+    <link rel="stylesheet" href="./css/notifications.css">
+    <link rel="stylesheet" href="./css/keyboard.css">
+    <title>Headless Render</title>
+  </head>
+  <body style="overflow-y: hidden">
+    <div id="main"></div>
+    <script>
+        require('./build/headless-render.js')
+    </script>
+  </body>
+</html>
diff --git a/src/js/headless-render/hooks/useSaveImage.js b/src/js/headless-render/hooks/useSaveImage.js
@@ -0,0 +1,54 @@
+import * as THREE from 'three'
+import { useThree } from 'react-three-fiber'
+
+import { ipcRenderer } from 'electron'
+import { 
+    getSerializedState,
+ } from '../../shared/reducers/shot-generator'
+const setCameraAspectFromRendererSize = (renderer, camera) => {
+    let size = renderer.getSize(new THREE.Vector2())
+    camera.aspect = size.width / size.height
+}
+
+const renderShot = (renderer, scene, originalCamera, shotSize) => {
+    let camera = originalCamera.clone()
+
+    //camera.layers.set(SHOT_LAYERS)
+
+    setCameraAspectFromRendererSize(renderer, camera)
+    camera.updateProjectionMatrix()
+    renderer.setSize(shotSize.width, shotSize.height)
+    renderer.render(scene, camera)
+    let shotImageDataUrl = renderer.domElement.toDataURL()
+    return { shotImageDataUrl}
+}
+
+const useSaveImage = (renderer, dispatch) => {
+    const { camera, scene } = useThree()
+
+    const saveImage = () => (dispatch, getState) => {
+        let state = getState()
+        let aspectRatio = state.aspectRatio
+        let shotSize = new THREE.Vector2(Math.ceil(aspectRatio * 900), 900)
+
+        let {shotImageDataUrl} = renderShot(renderer, scene, camera, shotSize)
+        let data = getSerializedState(state)
+        let currentBoard = state.board
+        let uid = currentBoard.uid
+
+        ipcRenderer.send('saveShot', {
+          uid,
+          data,
+          images: {
+            camera: shotImageDataUrl
+          }
+        })
+
+    }
+
+    const saveCurrentShotCb = () => dispatch( saveImage())
+    return {saveImage:saveCurrentShotCb}
+
+}
+
+export default useSaveImage;