From a9d86650f40a82a64d1fd8e0525c26422d314d3a Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 16 Mar 2021 16:38:07 +0100
Subject: make uploads like animism. start audio stuff

---
 frontend/app/common/form.component.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'frontend/app/common/form.component.js')

diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
index cf3e466..927b89d 100644
--- a/frontend/app/common/form.component.js
+++ b/frontend/app/common/form.component.js
@@ -76,7 +76,7 @@ export const Checkbox = props => (
       type="checkbox"
       name={props.name}
       value={1}
-      checked={props.checked}
+      checked={!!props.checked}
       onChange={(e) => props.onChange(props.name, e.target.checked)}
     />
     <span>{props.label}</span>
-- 
cgit v1.2.3-70-g09d2


From daa1060ce3f953a767b88a1108185a9554d91649 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 20 Mar 2021 22:30:00 +0100
Subject: form styling

---
 frontend/app/common/form.component.js           |   2 +-
 frontend/app/views/graph/graph.css              |  35 +++++++-
 frontend/app/views/page/page.css                |   3 +
 frontend/app/views/tile/components/tile.form.js | 108 ++++++++++++++----------
 4 files changed, 98 insertions(+), 50 deletions(-)

(limited to 'frontend/app/common/form.component.js')

diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
index 927b89d..d0ebea3 100644
--- a/frontend/app/common/form.component.js
+++ b/frontend/app/common/form.component.js
@@ -71,7 +71,7 @@ export const TextArea = props => (
 )
 
 export const Checkbox = props => (
-  <label className="checkbox">
+  <label className={props.className ? props.className + " checkbox" : "checkbox"}>
     <input
       type="checkbox"
       name={props.name}
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index bfdbe5c..171bb38 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -69,6 +69,9 @@
   justify-content: flex-start;
   align-items: center;
 }
+.box form label.checkbox.short span {
+  padding: 0.125rem 0;
+}
 .box form input[type="checkbox"] {
   margin-left: 0rem;
 }
@@ -104,6 +107,9 @@
   padding: 0.25rem;
   margin-right: 0;
 }
+.box .single .select {
+  width: 9.25rem;
+}
 .box .selects label {
   flex-direction: row;
   width: 6.5rem;
@@ -114,9 +120,9 @@
   padding: 0.25rem;
 }
 
-.box form .single label span,
-.box form .pair label span {
-  min-width: 3rem;
+.box form .single label span {
+  min-width: auto;
+  width: 4.25rem;
   padding: 0.25rem 0;
 }
 .box .single label {
@@ -125,6 +131,11 @@
   margin-right: 0.5px;
   min-width: auto;
 }
+
+.box form .pair label span {
+  min-width: 3rem;
+  padding: 0.25rem 0;
+}
 .box .pair label {
   flex-direction: row;
   width: 6.5rem;
@@ -134,10 +145,28 @@
 .box .pair input[type=text] {
   width: 3rem;
 }
+
+.box form .single_text label span {
+  min-width: auto;
+  width: 6rem;
+  padding: 0.25rem 0;
+}
+.box .single_text input[type=text] {
+  width: 7rem;
+}
+.box .single_text label {
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  margin-right: 0.5px;
+  min-width: auto;
+}
+
 .box .position {
   font-size: smaller;
   margin-bottom: 0.25rem;
 }
+
 button.box_corner {
   position: absolute;
   top: 1.25rem; right: 1.25rem;
diff --git a/frontend/app/views/page/page.css b/frontend/app/views/page/page.css
index 2998007..2e0efb9 100644
--- a/frontend/app/views/page/page.css
+++ b/frontend/app/views/page/page.css
@@ -117,6 +117,9 @@
 .box .row.pair {
   justify-content: space-between;
 }
+.box .row.pair.with_checkbox {
+  align-items: flex-end;
+}
 .box .row.single {
   justify-content: space-between;
 }
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 3066da3..c2f2f60 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -569,7 +569,7 @@ class TileForm extends Component {
             autoComplete="off"
           />
         </div>
-        <div className='row pair'>
+        <div className='row pair with_checkbox'>
           <Select
             name='video_style'
             selected={temporaryTile.settings.video_style || 'none'}
@@ -589,12 +589,14 @@ class TileForm extends Component {
           <Checkbox
             label="Muted"
             name="muted"
+            className='short'
             checked={temporaryTile.settings.muted}
             onChange={this.handleSettingsSelect}
           />
           <Checkbox
             label="Autoadvance"
             name="autoadvance"
+            className='short'
             checked={temporaryTile.settings.autoadvance}
             onChange={this.handleSettingsSelect}
           />
@@ -603,6 +605,7 @@ class TileForm extends Component {
           <div className='row'>
             <Checkbox
               label="Loop section?"
+              className='short'
               name="loop_section"
               checked={temporaryTile.settings.loop_section}
               onChange={this.handleSettingsSelect}
@@ -743,15 +746,6 @@ class TileForm extends Component {
             autoComplete="off"
           />
         </div>
-        <div className='row single'>
-          <Select
-            name='units'
-            selected={temporaryTile.settings.units}
-            options={UNITS}
-            title='Units'
-            onChange={this.handleSettingsSelect}
-          />
-        </div>
       </div>
     )
   }
@@ -838,32 +832,40 @@ class TileForm extends Component {
         <Checkbox
           label="Sound effects"
           name="has_audio"
+          className='short'
           checked={temporaryTile.settings.has_audio}
           onChange={this.handleSettingsSelect}
         />
         {temporaryTile.settings.has_audio && (
-          <div >
-            <AudioSelect
-              title="On click"
-              name="audio_on_click_id"
-              selected={temporaryTile.settings.audio_on_click_id}
-              onChange={this.handleSettingsSelect}
-            />
-
-            <Checkbox
-              label="Navigate when audio finishes"
-              name="navigate_when_audio_finishes"
-              checked={temporaryTile.settings.navigate_when_audio_finishes}
-              onChange={this.handleSettingsSelect}
-              autoComplete="off"
-            />
-
-            <AudioSelect
-              title="On hover"
-              name="audio_on_hover_id"
-              selected={temporaryTile.settings.audio_on_hover_id}
-              onChange={this.handleSettingsSelect}
-            />
+          <div>
+            <div className='row single'>
+              <AudioSelect
+                title="On click"
+                name="audio_on_click_id"
+                selected={temporaryTile.settings.audio_on_click_id}
+                onChange={this.handleSettingsSelect}
+              />
+            </div>
+
+            {!!temporaryTile.settings.audio_on_click_id && (
+              <Checkbox
+                label="Navigate when audio finishes"
+                name="navigate_when_audio_finishes"
+                className='short'
+                checked={temporaryTile.settings.navigate_when_audio_finishes}
+                onChange={this.handleSettingsSelect}
+                autoComplete="off"
+              />
+            )}
+
+            <div className='row single'>
+              <AudioSelect
+                title="On hover"
+                name="audio_on_hover_id"
+                selected={temporaryTile.settings.audio_on_hover_id}
+                onChange={this.handleSettingsSelect}
+              />
+            </div>
           </div>
         )}
       </div>
@@ -874,6 +876,15 @@ class TileForm extends Component {
     const { temporaryTile } = this.props
     return (
       <div>
+        <div className='row single'>
+          <Select
+            name='units'
+            selected={temporaryTile.settings.units || 'px'}
+            options={UNITS}
+            title='Units'
+            onChange={this.handleSettingsSelect}
+          />
+        </div>
         <Slider
           title='Opacity'
           name='opacity'
@@ -905,18 +916,21 @@ class TileForm extends Component {
         <Checkbox
           label="Element is a Popup"
           name="is_popup"
+          className='short'
           checked={temporaryTile.settings.is_popup}
           onChange={this.handleSettingsSelect}
           autoComplete="off"
         />
         {temporaryTile.settings.is_popup && (
-          <TextInput
-            title="Popup group"
-            name="popup_group"
-            data={temporaryTile.settings}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
-          />
+          <div className='row single_text'>
+            <TextInput
+              title="Popup group"
+              name="popup_group"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+          </div>
         )}
         <Checkbox
           label="Wait to appear"
@@ -926,13 +940,15 @@ class TileForm extends Component {
           autoComplete="off"
         />
         {temporaryTile.settings.wait_to_appear && (
-          <TextInput
-            title="Appear after"
-            name="appear_after"
-            data={temporaryTile.settings}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
-          />
+          <div className='row single_text'>
+            <TextInput
+              title="Appear after"
+              name="appear_after"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+          </div>
         )}
       </div>
     )
-- 
cgit v1.2.3-70-g09d2


From 285bc89a400c2faa7b6c7c327300c7842711935b Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 22 Mar 2021 16:06:13 +0100
Subject: fix proportional sizing

---
 README.md                                         | 16 +++++-
 cli/commands/site/populate.py                     | 19 +++----
 frontend/app/common/form.component.js             | 69 ++++++++++++++++++-----
 frontend/app/views/page/components/page.editor.js |  2 +-
 frontend/app/views/tile/handles/tile.image.js     |  4 +-
 frontend/app/views/tile/handles/tile.link.js      |  8 +--
 frontend/app/views/tile/handles/tile.script.js    |  4 +-
 frontend/app/views/tile/handles/tile.text.js      |  8 +--
 frontend/app/views/tile/handles/tile.video.js     |  2 +-
 frontend/app/views/tile/tile.utils.js             | 14 ++---
 static/site.html                                  |  2 +-
 11 files changed, 98 insertions(+), 50 deletions(-)

(limited to 'frontend/app/common/form.component.js')

diff --git a/README.md b/README.md
index dcfa219..9e8cca6 100644
--- a/README.md
+++ b/README.md
@@ -47,9 +47,19 @@ Generate a new migration if you've modified the database:
 ./cli.py db upgrade head
 ```
 
-## Building the site
+Run the frontend demo flask server (port 3000):
 
 ```
-npm run build:production
-./cli.py site export --graph swimmer
+yarn demo
+```
+
+To programmatically create pages, modify `cli/commands/site/populate.py`
+
+## Deploying a site
+
+A hypothetical rsync command:
+
+```
+cd data_store/exports/
+rsync -rlptuvz ./last-museum/ lens@garden:swimmer/data_store/exports/last-museum/
 ```
diff --git a/cli/commands/site/populate.py b/cli/commands/site/populate.py
index 03914b2..b1b9691 100644
--- a/cli/commands/site/populate.py
+++ b/cli/commands/site/populate.py
@@ -1,12 +1,11 @@
 import click
 
-lines = """/static/media/last-museum/juliana-cerqueira-leite/01_JCL_AndyCbs_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/02_JCL_Containers_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/04_JCL_Repshp_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/07_JCL_GmShp_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/10_JCL_StreetPrtSftwr_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/11_JCL_Oscilloscopes_v1.mp4
-""".split("\n")
+lines = """/static/media/last-museum/nicole-foreshew/establishing1.mp4
+/static/media/last-museum/nicole-foreshew/sequence1b.mp4
+/static/media/last-museum/nicole-foreshew/sequence2.mp4
+/static/media/last-museum/nicole-foreshew/sequence3.mp4
+/static/media/last-museum/nicole-foreshew/sequence4.mp4
+/static/media/last-museum/nicole-foreshew/sequence5.mp4""".split("\n")
 
 letters = ['a','b','c','d','e','f','g','h','i','j']
 
@@ -22,19 +21,19 @@ def cli(ctx):
     return None if resp.status_code != 200 else resp.json()
 
   graph_id = 3
-  name = "Juliana Cerqueira Leite. Stalfigenia, Chapter "
+  name = "Nicole Foreshew"
   index = 0
 
   for url in lines:
     # slug = url.split("/")[5].replace(".mp4", "").lower()
-    slug = "leite-" + letters[index]
+    slug = "foreshew-" + str(index) # + letters[index]
     print(slug)
     index += 1
 
     page_data = {
       "graph_id": graph_id,
       "path": slug,
-      "title": name + str(index),
+      "title": name, # + str(index),
       "username": "jules",
       "description":"",
       "settings": {
diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
index d0ebea3..de1020a 100644
--- a/frontend/app/common/form.component.js
+++ b/frontend/app/common/form.component.js
@@ -23,21 +23,60 @@ export const LabelDescription = props => (
   </label>
 )
 
-export const NumberInput = props => (
-  <label className={props.error ? 'error' : 'text'}>
-    <span>{props.title}</span>
-    <input
-      type="number"
-      required={props.required}
-      onChange={props.onChange}
-      name={props.name}
-      value={props.data[props.name]}
-      min={props.min}
-      max={props.max}
-      step={props.step || 1}
-    />
-  </label>
-)
+export class NumberInput extends Component {
+  constructor(props) {
+    super(props)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+  }
+  handleKeyDown(e) {
+    const { min, max, step, data, name, onChange } = this.props
+    const value = data[name]
+    // console.log(e.keyCode)
+    switch (e.keyCode) {
+      case 38: // up
+        if (e.shiftKey) {
+          e.preventDefault()
+          onChange({
+            target: {
+              name,
+              value: Math.min(max, parseFloat(value) + ((step || 1) * 10))
+            }
+          })
+        }
+        break
+      case 40: // down
+        if (e.shiftKey) {
+          e.preventDefault()
+          onChange({
+            target: {
+              name,
+              value: Math.max(min, parseFloat(value) - ((step || 1) * 10))
+            }
+          })
+        }
+        break
+    }
+  }
+  render() {
+    const { props } = this
+    return (
+      <label className={props.error ? 'error' : 'text'}>
+        <span>{props.title}</span>
+        <input
+          type="number"
+          required={props.required}
+          onKeyDown={this.handleKeyDown}
+          onChange={props.onChange}
+          name={props.name}
+          value={props.data[props.name]}
+          min={props.min}
+          max={props.max}
+          step={props.step || 1}
+        />
+      </label>
+    )
+  }
+}
 
 export const ColorInput = props => (
   <label className={props.error ? 'error color' : 'text color'}>
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index 7e841ef..adf8652 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -178,7 +178,7 @@ class PageEditor extends Component {
     const { res } = this.props.page.show
     const { settings } = res
     const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
-    const videoBounds = (res.tiles.length && res.tiles[0].type === 'video') ? {
+    const videoBounds = (res.tiles && res.tiles.length && res.tiles[0].type === 'video') ? {
       width: res.tiles[0].settings.width,
       height: res.tiles[0].settings.height,
     } : this.state.bounds
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index beeb36a..b6d1d78 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform } from 'app/views/tile/tile.utils'
 
-export default function TileImage({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileImage({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
index a87b95f..fb6ec03 100644
--- a/frontend/app/views/tile/handles/tile.link.js
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
@@ -15,8 +15,8 @@ export default function TileScript({ tile, box, videoBounds, viewing, onMouseDow
 
   let content = ""
   className += ' ' + tile.settings.align
-  style.width = unitsDimension(tile, 'width', videoBounds)
-  style.height = unitsDimension(tile, 'height', videoBounds)
+  style.width = unitsDimension(tile, 'width', bounds, videoBounds)
+  style.height = unitsDimension(tile, 'height', bounds, videoBounds)
 
   return (
     <div
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
index 444a56b..47d83a1 100644
--- a/frontend/app/views/tile/handles/tile.script.js
+++ b/frontend/app/views/tile/handles/tile.script.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index 172212a..0bcccc9 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
@@ -18,8 +18,8 @@ export default function TileScript({ tile, box, videoBounds, viewing, onMouseDow
   }
   let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
   className += ' ' + tile.settings.align
-  style.width = unitsDimension(tile, 'width', videoBounds)
-  style.height = unitsDimension(tile, 'height', videoBounds)
+  style.width = unitsDimension(tile, 'width', bounds, videoBounds)
+  style.height = unitsDimension(tile, 'height', bounds, videoBounds)
   style.fontFamily = tile.settings.font_family
   style.fontSize = tile.settings.font_size + 'px'
   style.lineHeight = 1.5
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index 271a671..a34d348 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -59,7 +59,7 @@ export default class TileVideo extends Component {
     let { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
     // console.log(tile)
     const style = {
-      transform: generateTransform(tile, box, videoBounds),
+      transform: generateTransform(tile, box, bounds, videoBounds),
       opacity: tile.settings.opacity,
     }
     let className = ['tile', tile.type].join(' ')
diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
index ed1cbc8..46d7764 100644
--- a/frontend/app/views/tile/tile.utils.js
+++ b/frontend/app/views/tile/tile.utils.js
@@ -1,4 +1,4 @@
-export const generateTransform = (tile, box, videoBounds) => {
+export const generateTransform = (tile, box, bounds, videoBounds) => {
   let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
   if (is_tiled) {
     return 'translateZ(0)'
@@ -18,8 +18,8 @@ export const generateTransform = (tile, box, videoBounds) => {
   }
   // if (x % 2 == 1) x += 0.5
   // if (y % 2 == 1) y += 0.5
-  const xUnits = units === 'video' ? videoUnits(x, videoBounds) : x + units
-  const yUnits = units === 'video' ? videoUnits(y, videoBounds) : y + units
+  const xUnits = units === 'video' ? videoUnits(x, bounds, videoBounds) : x + units
+  const yUnits = units === 'video' ? videoUnits(y, bounds, videoBounds) : y + units
 
   transform.push('translateX(' + xUnits + ')')
   transform.push('translateY(' + yUnits + ')')
@@ -63,18 +63,18 @@ export const generateVideoStyle = (tile, bounds) => {
   return style
 }
 
-export const unitsDimension = (tile, dimension, videoBounds) => {
+export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
   const value = tile.settings[dimension]
   if (!value) return "auto"
   if (tile.settings.units) {
     if (tile.settings.units === 'video') {
-      return videoUnits(value, videoBounds)
+      return videoUnits(value, bounds, videoBounds)
     }
     return value + tile.settings.units
   }
   return value + "px"
 }
 
-export const videoUnits = (value, videoBounds) => (
-  (value / 1000 * Math.max(videoBounds.width, videoBounds.height)) + 'px'
+export const videoUnits = (value, bounds, videoBounds) => (
+  Math.round(value / videoBounds.width * bounds.width) + 'px'
 )
\ No newline at end of file
diff --git a/static/site.html b/static/site.html
index e19847b..1412da5 100644
--- a/static/site.html
+++ b/static/site.html
@@ -12,7 +12,7 @@
 <body>
 <script>
   var s = document.createElement('script');
-  s.setAttribute('src', 'BUNDLE_PATH?' + (Date.now() / 3600))
+  s.setAttribute('src', 'BUNDLE_PATH?' + Math.round(Date.now() / 30000))
   document.body.appendChild(s)
 </script>
 </html>
-- 
cgit v1.2.3-70-g09d2