From 17fb6581d305732e2cf0add7f3444e1aa80aec5c Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 19 Mar 2021 19:10:26 +0100
Subject: split tile handles into individual files. add video subsection loop

---
 frontend/app/views/tile/handles/tile.video.js | 72 +++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 frontend/app/views/tile/handles/tile.video.js

(limited to 'frontend/app/views/tile/handles/tile.video.js')

diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
new file mode 100644
index 0000000..001cce2
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+
+import { generateTransform, generateVideoStyle } from 'app/views/tile/tile.utils'
+import { timestampToSeconds } from 'app/utils'
+
+export default class TileVideo extends Component {
+  constructor(props) {
+    super(props)
+    this.videoRef = React.createRef()
+    this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
+    this.handleEnded = this.handleEnded.bind(this)
+  }
+  componentDidMount() {
+    this.videoRef.current.addEventListener('ended', this.handleEnded)
+    this.videoRef.current.addEventListener('timeupdate', this.handleTimeUpdate)
+  }
+  componentWillUnmount() {
+    this.videoRef.current.removeEventListener('timeupdate', this.handleTimeUpdate)
+    this.videoRef.current.removeEventListener('ended', this.handleEnded)
+  }
+  handleTimeUpdate() {
+    if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
+      const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0
+      const loop_end = timestampToSeconds(this.props.tile.settings.loop_end) || this.videoRef.current.duration
+      if (this.videoRef.current.currentTime > loop_end) {
+        this.videoRef.current.currentTime = loop_start
+      }
+    }
+  }
+  handleEnded() {
+    this.props.onPlaybackEnded(this.props.tile)
+    if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
+      const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0
+      this.videoRef.current.currentTime = loop_start
+    }
+  }
+  render() {
+    let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props
+    // console.log(tile)
+    const style = {
+      transform: generateTransform(tile, box),
+      opacity: tile.settings.opacity,
+    }
+    let className = ['tile', tile.type].join(' ')
+    if (tile.target_page_id || (viewing && tile.href)) {
+      className += ' ' + (tile.settings.cursor || 'hand_up')
+    }
+    // console.log(tile.settings)
+    if (!tile.settings.url) {
+      return null
+    }
+    className += ' ' + tile.settings.align
+    return (
+      <div
+        className={className}
+        onMouseDown={onMouseDown}
+        onDoubleClick={onDoubleClick}
+        style={style}
+      >
+        <video
+          ref={this.videoRef}
+          src={tile.settings.url}
+          autoPlay={true}
+          controls={false}
+          loop={tile.settings.loop}
+          muted={tile.settings.muted}
+          style={generateVideoStyle(tile, bounds)}
+        />
+      </div>
+    )
+  }
+}
-- 
cgit v1.2.3-70-g09d2


From d9ee2c97882ea5ace9c28ac6560ffa240daf9345 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 20 Mar 2021 18:03:31 +0100
Subject: toggle side of sidebar. popup form. wait to appear form.

---
 frontend/app/common/slider.component.js            |  4 ++--
 frontend/app/types.js                              |  2 ++
 .../app/views/audio/components/audio.select.js     |  2 +-
 frontend/app/views/graph/graph.css                 | 19 ++++++++++++++++++
 frontend/app/views/page/components/page.header.js  |  1 +
 frontend/app/views/page/page.actions.js            | 10 ++++++++++
 frontend/app/views/page/page.container.js          |  2 +-
 frontend/app/views/page/page.reducer.js            | 19 ++++++++++++++++++
 frontend/app/views/tile/components/tile.form.js    | 15 ++++++++------
 frontend/app/views/tile/handles/tile.video.js      | 23 +++++++++++++++++-----
 10 files changed, 82 insertions(+), 15 deletions(-)

(limited to 'frontend/app/views/tile/handles/tile.video.js')

diff --git a/frontend/app/common/slider.component.js b/frontend/app/common/slider.component.js
index 9d96b1e..d19ab9b 100644
--- a/frontend/app/common/slider.component.js
+++ b/frontend/app/common/slider.component.js
@@ -53,7 +53,7 @@ export default class Slider extends Component {
     }
   }
   handleKeyDown(e) {
-    console.log(e.keyCode)
+    // console.log(e.keyCode)
   }
   handleRange(e){
     let { value: new_value } = e.target
@@ -90,7 +90,7 @@ export default class Slider extends Component {
       step = 1
       value = this.props.options.indexOf(value)
     } else {
-      step = (this.props.max - this.props.min) / 100
+      step = this.props.step || (this.props.max - this.props.min) / 100
       text_value = parseFloat(value).toFixed(2)
     }
     return (
diff --git a/frontend/app/types.js b/frontend/app/types.js
index 19d1e69..bcd8053 100644
--- a/frontend/app/types.js
+++ b/frontend/app/types.js
@@ -15,6 +15,8 @@ export const page = crud_type('page', [
   'update_page_tile',
   'set_tile_sort_order', 'update_tile_sort_order',
   'show_tile_list', 'hide_tile_list', 'toggle_tile_list',
+  'toggle_popups',
+  'toggle_sidebar_side',
 ])
 
 export const tile = crud_type('tile', [
diff --git a/frontend/app/views/audio/components/audio.select.js b/frontend/app/views/audio/components/audio.select.js
index cf1dfb2..384bb7a 100644
--- a/frontend/app/views/audio/components/audio.select.js
+++ b/frontend/app/views/audio/components/audio.select.js
@@ -6,7 +6,7 @@ import { unslugify } from 'app/utils'
 
 const NO_AUDIO = 0
 const AUDIO_TOP_OPTIONS = [
-  { name: NO_AUDIO, label: 'No Audio' },
+  { name: NO_AUDIO, label: 'No Sound' },
   { name: -2, label: '──────────', disabled: true },
 ]
 
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index c6ef115..a557280 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -29,6 +29,10 @@
   max-height: 100%;
   z-index: 20;
 }
+.sidebar.left {
+  right: auto;
+  left: 0;
+}
 .box {
   width: 15rem;
   padding: 0.5rem;
@@ -127,6 +131,21 @@
   font-size: smaller;
   margin-bottom: 0.25rem;
 }
+button.box_corner {
+  position: absolute;
+  top: 1.25rem; right: 1.25rem;
+  padding: 0.5rem;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+}
+button.box_corner:hover {
+  color: #fff;
+  background: rgba(64,64,128,0.5);
+}
+.sidebar.left button.box_corner {
+  transform: scaleX(-1);
+}
 
 .box .slider {
   display: flex;
diff --git a/frontend/app/views/page/components/page.header.js b/frontend/app/views/page/components/page.header.js
index dbdf1b6..d40f6e0 100644
--- a/frontend/app/views/page/components/page.header.js
+++ b/frontend/app/views/page/components/page.header.js
@@ -27,6 +27,7 @@ function PageHeader(props) {
       <div>
         <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
         <button onClick={() => props.pageActions.toggleTileList()}>Sort tiles</button>
+        <button onClick={() => props.pageActions.togglePopups()}>Toggle popups</button>
         <button onClick={() => props.graphActions.toggleEditPageForm()}>Edit page</button>
         <button onClick={() => props.graphActions.viewPage(props.graph, props.page)}>View page</button>
       </div>
diff --git a/frontend/app/views/page/page.actions.js b/frontend/app/views/page/page.actions.js
index d2bbbe2..c584848 100644
--- a/frontend/app/views/page/page.actions.js
+++ b/frontend/app/views/page/page.actions.js
@@ -50,6 +50,16 @@ export const toggleTileList = () => dispatch => {
   dispatch({ type: types.page.toggle_tile_list })
 }
 
+// Popups
+
+export const togglePopups = () => dispatch => {
+  dispatch({ type: types.page.toggle_popups })
+}
+
+export const toggleSidebarSide = () => dispatch => {
+  dispatch({ type: types.page.toggle_sidebar_side })
+}
+
 // Update local page tile state when we change it
 
 export const updatePageTile = tile => dispatch => {
diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js
index 68347b7..decdf79 100644
--- a/frontend/app/views/page/page.container.js
+++ b/frontend/app/views/page/page.container.js
@@ -70,7 +70,7 @@ class PageContainer extends Component {
         <PageHeader />
         <div className='body'>
           <PageEditor />
-          <div className='sidebar'>
+          <div className={this.props.page.editor.sidebarOnRight ? 'sidebar' : 'sidebar left'}>
             {this.props.graph.editor.editingPage && <PageEdit />}
             {this.props.page.editor.addingTile && <TileNew />}
             {this.props.page.editor.editingTile && <TileEdit />}
diff --git a/frontend/app/views/page/page.reducer.js b/frontend/app/views/page/page.reducer.js
index c2d231a..b0c4553 100644
--- a/frontend/app/views/page/page.reducer.js
+++ b/frontend/app/views/page/page.reducer.js
@@ -9,6 +9,8 @@ const initialState = crudState('page', {
     editingTile: false,
     currentEditTileId: 0,
     tileList: false,
+    showingPopups: true,
+    sidebarOnRight: true,
   },
   options: {
   }
@@ -195,6 +197,23 @@ export default function pageReducer(state = initialState, action) {
         }
       }
 
+    case types.page.toggle_popups:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          togglePopups: !state.editor.togglePopups,
+        }
+      }
+
+    case types.page.toggle_sidebar_side:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          sidebarOnRight: !state.editor.sidebarOnRight,
+        }
+      }
 
     default:
       return state
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 7d0780d..728bc05 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -13,7 +13,8 @@ import {
 import AudioSelect from 'app/views/audio/components/audio.select'
 import { preloadImage, preloadVideo } from 'app/utils'
 
-import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from 'app/views/page/page.actions'
+import * as tileActions from 'app/views/tile/tile.actions'
 
 const SELECT_TYPES = [
   "image", "text", "video", "link", "script",
@@ -66,13 +67,13 @@ const CURSORS = [
 const NO_LINK = 0
 const EXTERNAL_LINK = -1
 const OPEN_POPUP_LINK = -2
-const CLOSE_POPUP_LINK = -2
+const CLOSE_POPUP_LINK = -3
 const PAGE_LIST_TOP_OPTIONS = [
   { name: NO_LINK, label: 'No link' },
   { name: EXTERNAL_LINK, label: 'External link' },
   { name: OPEN_POPUP_LINK, label: 'Open popup' },
   { name: CLOSE_POPUP_LINK, label: 'Close popup' },
-  { name: -3, label: '──────────', disabled: true },
+  { name: -99, label: '──────────', disabled: true },
 ]
 
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
@@ -410,6 +411,9 @@ class TileForm extends Component {
     return (
       <div className='box'>
         <h1>{title}</h1>
+        <button className='box_corner' onClick={this.props.pageActions.toggleSidebarSide}>
+          {'◁'}
+        </button>
         <form onSubmit={this.handleSubmit}>
           <div className="row selects">
             <Select
@@ -802,7 +806,7 @@ class TileForm extends Component {
     return (
       <div>
         <Checkbox
-          label="Add audio events"
+          label="Sound effects"
           name="has_audio"
           checked={temporaryTile.settings.has_audio}
           onChange={this.handleSettingsSelect}
@@ -880,7 +884,6 @@ class TileForm extends Component {
             title="Popup group"
             name="popup_group"
             data={temporaryTile.settings}
-            error={errorFields.has('popup_group')}
             onChange={this.handleSettingsChange}
             autoComplete="off"
           />
@@ -897,7 +900,6 @@ class TileForm extends Component {
             title="Appear after"
             name="appear_after"
             data={temporaryTile.settings}
-            error={errorFields.has('appear_after')}
             onChange={this.handleSettingsChange}
             autoComplete="off"
           />
@@ -915,6 +917,7 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
   tileActions: bindActionCreators({ ...tileActions }, dispatch),
 })
 
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index 001cce2..a9f0d09 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -11,12 +11,25 @@ export default class TileVideo extends Component {
     this.handleEnded = this.handleEnded.bind(this)
   }
   componentDidMount() {
-    this.videoRef.current.addEventListener('ended', this.handleEnded)
-    this.videoRef.current.addEventListener('timeupdate', this.handleTimeUpdate)
+    this.bind()
+  }
+  componentDidUpdate() {
+    this.unbind()
+    this.bind()
   }
   componentWillUnmount() {
-    this.videoRef.current.removeEventListener('timeupdate', this.handleTimeUpdate)
-    this.videoRef.current.removeEventListener('ended', this.handleEnded)
+    this.unbind()
+  }
+  bind() {
+    if (!this.videoRef.current) return
+    this.el = this.videoRef.current
+    this.el.addEventListener('ended', this.handleEnded)
+    this.el.addEventListener('timeupdate', this.handleTimeUpdate)
+  }
+  unbind() {
+    if (!this.el) return
+    this.el.removeEventListener('timeupdate', this.handleTimeUpdate)
+    this.el.removeEventListener('ended', this.handleEnded)
   }
   handleTimeUpdate() {
     if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
@@ -63,7 +76,7 @@ export default class TileVideo extends Component {
           autoPlay={true}
           controls={false}
           loop={tile.settings.loop}
-          muted={tile.settings.muted}
+          muted={viewing ? tile.settings.muted : true}
           style={generateVideoStyle(tile, bounds)}
         />
       </div>
-- 
cgit v1.2.3-70-g09d2


From 19cf3a296741b92548849b1f40e0d3cc517f2fcc Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 20 Mar 2021 22:14:21 +0100
Subject: dimensions based on video

---
 cli/app/site/export.py                            |  4 +++
 frontend/app/views/graph/graph.css                | 10 ++++++-
 frontend/app/views/page/components/page.editor.js | 18 +++++++++++--
 frontend/app/views/page/page.css                  |  3 +++
 frontend/app/views/tile/components/tile.form.js   | 32 ++++++++++++++---------
 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     | 12 +++++++--
 frontend/app/views/tile/tile.utils.js             | 22 ++++++++++++----
 frontend/site/viewer/viewer.container.js          | 29 +++++++++++++++++---
 12 files changed, 117 insertions(+), 37 deletions(-)

(limited to 'frontend/app/views/tile/handles/tile.video.js')

diff --git a/cli/app/site/export.py b/cli/app/site/export.py
index c301a60..4ce8b64 100644
--- a/cli/app/site/export.py
+++ b/cli/app/site/export.py
@@ -93,6 +93,10 @@ def sanitize_graph(graph):
       if tile['target_page_id']:
         if tile['target_page_id'] == -1:
           tile['href'] = tile['settings']['external_link_url']
+        elif tile['target_page_id'] == -2:
+          tile['href'] = '__open_popup'
+        elif tile['target_page_id'] == -3:
+          tile['href'] = '__close_popup'
         elif tile['target_page_id'] > 0:
           tile['href'] = page_path_lookup[tile['target_page_id']]
       if 'url' in tile['settings'] and tile['settings']['url'].startswith('/static'):
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index a557280..bfdbe5c 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -114,10 +114,17 @@
   padding: 0.25rem;
 }
 
+.box form .single label span,
 .box form .pair label span {
   min-width: 3rem;
   padding: 0.25rem 0;
 }
+.box .single label {
+  flex-direction: row;
+  width: 100%;
+  margin-right: 0.5px;
+  min-width: auto;
+}
 .box .pair label {
   flex-direction: row;
   width: 6.5rem;
@@ -138,13 +145,14 @@ button.box_corner {
   background: transparent;
   border: 0;
   border-radius: 4px;
+  transform: scaleX(-1);
 }
 button.box_corner:hover {
   color: #fff;
   background: rgba(64,64,128,0.5);
 }
 .sidebar.left button.box_corner {
-  transform: scaleX(-1);
+  transform: scaleX(1);
 }
 
 .box .slider {
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index 03190e3..7e841ef 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -16,6 +16,7 @@ import TileHandle from 'app/views/tile/components/tile.handle'
 const defaultState = {
   dragging: false,
   bounds: null,
+  videoBounds: null,
   mouseX: 0,
   mouseY: 0,
   box: {
@@ -37,6 +38,7 @@ class PageEditor extends Component {
     this.handleMouseMove = this.handleMouseMove.bind(this)
     this.handleMouseUp = this.handleMouseUp.bind(this)
     this.handleWindowResize = this.handleWindowResize.bind(this)
+    this.handlePlaybackEnded = this.handlePlaybackEnded.bind(this)
     this.pageRef = React.createRef()
   }
 
@@ -59,7 +61,8 @@ class PageEditor extends Component {
     document.body.addEventListener('mousemove', this.handleMouseMove)
     document.body.addEventListener('mouseup', this.handleMouseUp)
     window.addEventListener('resize', this.handleWindowResize)
-    this.setState({ bounds: this.getBoundingClientRect() })
+    const bounds = this.getBoundingClientRect()
+    this.setState({ bounds })
   }
 
   componentDidUpdate(prevProps) {
@@ -72,6 +75,10 @@ class PageEditor extends Component {
     this.setState({ bounds: this.getBoundingClientRect() })
   }
 
+  handlePlaybackEnded() {
+    //
+  }
+
   handleMouseDown(e, tile) {
     if (e.metaKey || e.ctrlKey || e.altKey || e.button !== 0) return
     const bounds = this.getBoundingClientRect()
@@ -171,10 +178,13 @@ 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') ? {
+      width: res.tiles[0].settings.width,
+      height: res.tiles[0].settings.height,
+    } : this.state.bounds
     return (
       <div className='page' ref={this.pageRef} style={pageStyle}>
         {res.tiles && res.tiles.map(tile => {
-          console.log(tile.type, tile.settings.is_popup)
           if (!this.props.page.editor.showingPopups && tile.settings.is_popup) return
           if (temporaryTile && temporaryTile.id === tile.id) {
             tile = temporaryTile
@@ -184,9 +194,11 @@ class PageEditor extends Component {
               key={tile.id}
               tile={tile}
               bounds={this.state.bounds}
+              videoBounds={videoBounds}
               box={currentTile && tile.id === currentTile.id && currentBox}
               onMouseDown={e => this.handleMouseDown(e, tile)}
               onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)}
+              onPlaybackEnded={this.handlePlaybackEnded}
             />
           )
         })}
@@ -195,8 +207,10 @@ class PageEditor extends Component {
             key={temporaryTile.id}
             tile={temporaryTile}
             bounds={this.state.bounds}
+            videoBounds={videoBounds}
             box={currentTile && temporaryTile.id === currentTile.id && currentBox}
             onMouseDown={e => this.handleMouseDown(e, temporaryTile)}
+            onPlaybackEnded={this.handlePlaybackEnded}
           />
         )}
       </div>
diff --git a/frontend/app/views/page/page.css b/frontend/app/views/page/page.css
index 2014289..2998007 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.single {
+  justify-content: space-between;
+}
 .box .pair label:last-child {
   margin-right: 0;
 }
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index b33f7b8..3066da3 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -64,6 +64,14 @@ const CURSORS = [
   { name: 'unclickable', label: 'Unclickable', },
 ]
 
+const UNITS = [
+  { name: 'px', label: 'pixels' },
+  { name: '%', label: 'percent' },
+  { name: 'video', label: 'video' },
+  { name: 'vmin', label: 'screen min' },
+  { name: 'vmax', label: 'screen max' },
+]
+
 const NO_LINK = 0
 const EXTERNAL_LINK = -1
 const OPEN_POPUP_LINK = -2
@@ -95,7 +103,7 @@ const newImage = (data) => ({
     cursor: 'hand_up',
   },
   type: 'image',
-  target_page_id: null,
+  target_page_id: 0,
   ...data,
 })
 
@@ -114,7 +122,7 @@ const newVideo = (data) => ({
     loop_end: 0,
   },
   type: 'video',
-  target_page_id: null,
+  target_page_id: 0,
   ...data,
 })
 
@@ -134,7 +142,7 @@ const newText = (data) => ({
     cursor: 'hand_up',
   },
   type: 'text',
-  target_page_id: null,
+  target_page_id: 0,
   ...data,
 })
 
@@ -146,7 +154,7 @@ const newLink = (data) => ({
     units: 'px',
   },
   type: 'link',
-  target_page_id: null,
+  target_page_id: 0,
   ...data,
 })
 
@@ -395,6 +403,7 @@ class TileForm extends Component {
       } else {
         validData.id = temporaryTile.id
       }
+      validData.target_page_id = validData.target_page_id || 0
       this.setState({ modified: false })
       console.log('submit', validData)
       onSubmit(validData)
@@ -734,14 +743,13 @@ class TileForm extends Component {
             autoComplete="off"
           />
         </div>
-        <div className='row pair'>
-          <TextInput
-            title="Units"
-            name="units"
-            data={temporaryTile.settings}
-            error={errorFields.has('units')}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
+        <div className='row single'>
+          <Select
+            name='units'
+            selected={temporaryTile.settings.units}
+            options={UNITS}
+            title='Units'
+            onChange={this.handleSettingsSelect}
           />
         </div>
       </div>
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index fd34876..beeb36a 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, viewing, onMouseDown, onDoubleClick }) {
+export default function TileImage({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box),
+    transform: generateTransform(tile, box, 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 20d881b..a87b95f 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, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box),
+    transform: generateTransform(tile, box, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
@@ -15,8 +15,8 @@ export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleCl
 
   let content = ""
   className += ' ' + tile.settings.align
-  style.width = unitsDimension(tile, 'width')
-  style.height = unitsDimension(tile, 'height')
+  style.width = unitsDimension(tile, 'width', videoBounds)
+  style.height = unitsDimension(tile, 'height', videoBounds)
 
   return (
     <div
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
index 6996cc0..444a56b 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, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box),
+    transform: generateTransform(tile, box, 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 5d38c85..172212a 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, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box),
+    transform: generateTransform(tile, box, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
@@ -18,8 +18,8 @@ export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleCl
   }
   let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
   className += ' ' + tile.settings.align
-  style.width = unitsDimension(tile, 'width')
-  style.height = unitsDimension(tile, 'height')
+  style.width = unitsDimension(tile, 'width', videoBounds)
+  style.height = unitsDimension(tile, 'height', 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 a9f0d09..271a671 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -10,27 +10,33 @@ export default class TileVideo extends Component {
     this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
     this.handleEnded = this.handleEnded.bind(this)
   }
+  
   componentDidMount() {
     this.bind()
   }
+
   componentDidUpdate() {
     this.unbind()
     this.bind()
   }
+
   componentWillUnmount() {
     this.unbind()
   }
+
   bind() {
     if (!this.videoRef.current) return
     this.el = this.videoRef.current
     this.el.addEventListener('ended', this.handleEnded)
     this.el.addEventListener('timeupdate', this.handleTimeUpdate)
   }
+
   unbind() {
     if (!this.el) return
     this.el.removeEventListener('timeupdate', this.handleTimeUpdate)
     this.el.removeEventListener('ended', this.handleEnded)
   }
+
   handleTimeUpdate() {
     if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
       const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0
@@ -40,6 +46,7 @@ export default class TileVideo extends Component {
       }
     }
   }
+
   handleEnded() {
     this.props.onPlaybackEnded(this.props.tile)
     if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
@@ -47,11 +54,12 @@ export default class TileVideo extends Component {
       this.videoRef.current.currentTime = loop_start
     }
   }
+
   render() {
-    let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props
+    let { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
     // console.log(tile)
     const style = {
-      transform: generateTransform(tile, box),
+      transform: generateTransform(tile, box, 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 8782f85..ed1cbc8 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) => {
+export const generateTransform = (tile, box, videoBounds) => {
   let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
   if (is_tiled) {
     return 'translateZ(0)'
@@ -18,8 +18,11 @@ export const generateTransform = (tile, box) => {
   }
   // if (x % 2 == 1) x += 0.5
   // if (y % 2 == 1) y += 0.5
-  transform.push('translateX(' + x + units + ')')
-  transform.push('translateY(' + y + units + ')')
+  const xUnits = units === 'video' ? videoUnits(x, videoBounds) : x + units
+  const yUnits = units === 'video' ? videoUnits(y, videoBounds) : y + units
+
+  transform.push('translateX(' + xUnits + ')')
+  transform.push('translateY(' + yUnits + ')')
   if (scale !== 1) {
     transform.push('scale(' + scale + ')')
   }
@@ -60,9 +63,18 @@ export const generateVideoStyle = (tile, bounds) => {
   return style
 }
 
-export const unitsDimension = (tile, dimension) => {
+export const unitsDimension = (tile, dimension, videoBounds) => {
   const value = tile.settings[dimension]
   if (!value) return "auto"
-  if (tile.settings.units) return value + tile.settings.units
+  if (tile.settings.units) {
+    if (tile.settings.units === 'video') {
+      return videoUnits(value, videoBounds)
+    }
+    return value + tile.settings.units
+  }
   return value + "px"
 }
+
+export const videoUnits = (value, videoBounds) => (
+  (value / 1000 * Math.max(videoBounds.width, videoBounds.height)) + 'px'
+)
\ No newline at end of file
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 6f6b850..d1fa885 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -15,6 +15,7 @@ class ViewerContainer extends Component {
     page: {},
     bounds: { width: window.innerWidth, height: window.innerHeight },
     roadblock: false,
+    popups: {},
   }
 
   constructor(props) {
@@ -44,9 +45,9 @@ class ViewerContainer extends Component {
     const { pages, home_page } = this.props.graph
     const page = pages[page_path] || pages[home_page]
     if (!this.props.interactive && hasAutoplay(page)) {
-      this.setState({ page, roadblock: true })
+      this.setState({ page, popups: {}, roadblock: true })
     } else {
-      this.setState({ page, roadblock: false })
+      this.setState({ page, popups: {}, roadblock: false })
       actions.site.interact()
       this.props.audio.player.playPage(page)
     }
@@ -67,6 +68,22 @@ class ViewerContainer extends Component {
         window.location.href = tile.href
         return
       }
+      else if (tile.href === '__open_popup') {
+        this.setState({
+          popups: {
+            ...this.state.popups,
+            [tile.settings.target_popup]: true,
+          }
+        })
+      }
+      else if (tile.href === '__close_popup') {
+        this.setState({
+          popups: {
+            ...this.state.popups,
+            [tile.settings.target_popup]: false,
+          }
+        })
+      }
       else if (!tile.settings.navigate_when_audio_finishes) {
         history.push(tile.href)
       }
@@ -86,7 +103,7 @@ class ViewerContainer extends Component {
   }
 
   render() {
-    const { page, audio } = this.state
+    const { page, audio, popups } = this.state
     if (this.state.roadblock) {
       return this.renderRoadblock()
     }
@@ -103,11 +120,16 @@ class ViewerContainer extends Component {
     }
     const { settings } = page
     const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
+    const videoBounds = (page.tiles.length && page.tiles[0].type === 'video') ? {
+      width: page.tiles[0].settings.width,
+      height: page.tiles[0].settings.height,
+    } : this.state.bounds
     // console.log(page)
     return (
       <div className='body'>
         <div className='page' ref={this.pageRef} style={pageStyle}>
           {page.tiles.map(tile => {
+            if (tile.settings.is_popup && !popups[tile.settings.popup_group]) return
             return (
               <TileHandle
                 viewing
@@ -115,6 +137,7 @@ class ViewerContainer extends Component {
                 tile={tile}
                 audio={audio}
                 bounds={this.state.bounds}
+                videoBounds={videoBounds}
                 onMouseDown={e => this.handleMouseDown(e, tile)}
                 onPlaybackEnded={e => this.handlePlaybackEnded(e, tile)}
                 onDoubleClick={e => {}}
-- 
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/views/tile/handles/tile.video.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


From fb82ff9fa188769f7cf7bb02c1c574201cbe9f85 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 23 Mar 2021 12:33:40 +0100
Subject:           disablePictureInPicture={true}

---
 frontend/app/views/page/components/page.editor.js |  3 ++-
 frontend/app/views/tile/components/tile.form.js   | 11 +++++++++++
 frontend/app/views/tile/handles/tile.video.js     | 15 ++++++++++++++-
 frontend/site/app.js                              | 10 +++++-----
 frontend/site/audio/audio.player.js               |  4 ++--
 frontend/site/site/site.actions.js                |  4 ++--
 6 files changed, 36 insertions(+), 11 deletions(-)

(limited to 'frontend/app/views/tile/handles/tile.video.js')

diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index adf8652..ec6ddd3 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -138,7 +138,7 @@ class PageEditor extends Component {
     const { dx, dy } = box
     let url = window.location.pathname
     this.setState({
-      page: null,
+      tile: null,
       box: null,
       initialBox: null,
       dragging: false,
@@ -150,6 +150,7 @@ class PageEditor extends Component {
     }
     const updatedTile = {
       ...tile,
+      target_page_id: tile.target_page_id || 0,
       settings: {
         ...tile.settings,
         x: tile.settings.x + dx,
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index c2a8f79..8f6fe83 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -601,6 +601,17 @@ class TileForm extends Component {
             onChange={this.handleSettingsSelect}
           />
         </div>
+        {!temporaryTile.settings.muted && (
+          <Slider
+            title='Volume'
+            name='volume'
+            value={('volume' in temporaryTile.settings) ? temporaryTile.settings.volume : 1.0}
+            onChange={this.handleSettingsSelect}
+            min={0.0}
+            max={1.0}
+            step={0.01}
+          />
+        )}
         {temporaryTile.settings.loop && (
           <div className='row'>
             <Checkbox
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index a34d348..b4183ce 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -29,6 +29,15 @@ export default class TileVideo extends Component {
     this.el = this.videoRef.current
     this.el.addEventListener('ended', this.handleEnded)
     this.el.addEventListener('timeupdate', this.handleTimeUpdate)
+    const muted = this.props.viewing
+      ? this.props.tile.settings.muted
+      : true
+    const volume = muted
+      ? 0.0
+      : ('volume' in this.props.tile.settings)
+        ? this.props.tile.settings.volume
+        : 1.0
+    this.el.volume = volume
   }
 
   unbind() {
@@ -71,6 +80,9 @@ export default class TileVideo extends Component {
       return null
     }
     className += ' ' + tile.settings.align
+    const muted = viewing
+      ? tile.settings.muted
+      : true
     return (
       <div
         className={className}
@@ -83,8 +95,9 @@ export default class TileVideo extends Component {
           src={tile.settings.url}
           autoPlay={true}
           controls={false}
+          disablePictureInPicture={true}
           loop={tile.settings.loop}
-          muted={viewing ? tile.settings.muted : true}
+          muted={muted}
           style={generateVideoStyle(tile, bounds)}
         />
       </div>
diff --git a/frontend/site/app.js b/frontend/site/app.js
index 4bb352b..098bd44 100644
--- a/frontend/site/app.js
+++ b/frontend/site/app.js
@@ -9,12 +9,12 @@ export default class App extends Component {
   componentDidMount() {
     const path_partz = window.location.pathname.split('/')
     const graph_name = path_partz[1]
-    let path_name = null
-    if (path_partz.length > 2) {
-      path_name = path_partz[2]
-    }
+    // let path_name = null
+    // if (path_partz.length > 2) {
+      // path_name = path_partz[2]
+    // }
     // console.log('loading', graph_name, path_name)
-    actions.site.loadSite(graph_name, path_name)
+    actions.site.loadSite(graph_name)
   }
   
   render() {
diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index 0dacdce..9914cd6 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -26,13 +26,13 @@ export default class AudioPlayer {
   }
 
   done(id) {
-    console.log('remove', id)
+    // console.log('remove', id)
     delete this.players[id]
   }
 
   playPage(page) {
     const { background_audio_id, restart_audio } = page.settings
-    console.log('playPage', page)
+    // console.log('playPage', page)
     if (
       this.current_background_id
       && this.current_background_id !== background_audio_id
diff --git a/frontend/site/site/site.actions.js b/frontend/site/site/site.actions.js
index 07814d6..aab68e8 100644
--- a/frontend/site/site/site.actions.js
+++ b/frontend/site/site/site.actions.js
@@ -6,8 +6,8 @@ export const setSiteTitle = title => dispatch => {
   dispatch({ type: types.site.set_site_title, payload: title })
 }
 
-export const loadSite = (graph_name, path_name) => dispatch => (
-  api(dispatch, types.site, 'site', '/' + graph_name + '/index.json')
+export const loadSite = graph_name => dispatch => (
+  api(dispatch, types.site, 'site', '/' + graph_name + '/index.json?t=' + (Date.now() / 3600000))
 )
 
 export const interact = () => dispatch => {
-- 
cgit v1.2.3-70-g09d2


From 7a3ec205e001e4c071a67ecc5c375612fa72afdc Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 23 Mar 2021 16:31:07 +0100
Subject: avoid executing embedded scripts multiple times. click to hide

---
 frontend/app/views/tile/handles/tile.image.js  |  4 +-
 frontend/app/views/tile/handles/tile.link.js   |  4 +-
 frontend/app/views/tile/handles/tile.script.js | 58 +++++++++++++-------------
 frontend/app/views/tile/handles/tile.text.js   |  5 ++-
 frontend/app/views/tile/handles/tile.video.js  |  4 +-
 5 files changed, 43 insertions(+), 32 deletions(-)

(limited to 'frontend/app/views/tile/handles/tile.video.js')

diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index b6d1d78..9ab5616 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -11,7 +11,9 @@ export default function TileImage({ tile, box, bounds, videoBounds, viewing, onM
   let content
   let className = ['tile', tile.type].join(' ')
   if (tile.target_page_id || (viewing && tile.href)) {
-    className += ' ' + (tile.settings.cursor || 'hand_up')
+    if (viewing || tile.settings.cursor !== 'unclickable') {
+      className += ' ' + (tile.settings.cursor || 'hand_up')
+    }
   }
 
   if (!tile.settings.url) {
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
index fb6ec03..4dd4fd4 100644
--- a/frontend/app/views/tile/handles/tile.link.js
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -10,7 +10,9 @@ export default function TileScript({ tile, box, bounds, videoBounds, viewing, on
   // console.log(generateTransform(tile))
   let className = ['tile', tile.type].join(' ')
   if (tile.target_page_id || (viewing && tile.href)) {
-    className += ' ' + (tile.settings.cursor || 'hand_up')
+    if (viewing || tile.settings.cursor !== 'unclickable') {
+      className += ' ' + (tile.settings.cursor || 'hand_up')
+    }
   }
 
   let content = ""
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
index 47d83a1..e844adf 100644
--- a/frontend/app/views/tile/handles/tile.script.js
+++ b/frontend/app/views/tile/handles/tile.script.js
@@ -1,34 +1,36 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { generateTransform } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
-  // console.log(tile)
-  const style = {
-    transform: generateTransform(tile, box, bounds, videoBounds),
-    opacity: tile.settings.opacity,
-  }
-  // console.log(generateTransform(tile))
-  let content;
-  let className = ['tile', tile.type].join(' ')
-  if (tile.target_page_id || (viewing && tile.href)) {
-    className += ' ' + (tile.settings.cursor || 'hand_up')
+export default class TileScript extends Component {
+  componentDidMount(){
+    const { viewing, tile } = this.props
+    if (viewing) {
+      eval(tile.settings.content)
+    }
   }
+  render() {
+    if (viewing) {
+      return <div style={{ display: 'none' }} />
+    }
 
-  content = ""
-  if (viewing) {
-    eval(tile.settings.content)
-  } else {
-    content = "SCRIPT"
-  }
+    const { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
+    // console.log(tile)
+    const style = {
+      transform: generateTransform(tile, box, bounds, videoBounds),
+      opacity: tile.settings.opacity,
+    }
+    // console.log(generateTransform(tile))
+    let className = ['tile', tile.type, 'hand_up'].join(' ')
 
-  return (
-    <div
-      className={className}
-      onMouseDown={onMouseDown}
-      onDoubleClick={onDoubleClick}
-      style={style}
-    >
-      {content}
-    </div>
-  )
+    return (
+      <div
+        className={className}
+        onMouseDown={onMouseDown}
+        onDoubleClick={onDoubleClick}
+        style={style}
+      >
+        {"SCRIPT"}
+      </div>
+    )
+  }
 }
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index 0bcccc9..2fd63b2 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -10,12 +10,15 @@ export default function TileScript({ tile, box, bounds, videoBounds, viewing, on
   // console.log(generateTransform(tile))
   let className = ['tile', tile.type].join(' ')
   if (tile.target_page_id || (viewing && tile.href)) {
-    className += ' ' + (tile.settings.cursor || 'hand_up')
+    if (viewing || tile.settings.cursor !== 'unclickable') {
+      className += ' ' + (tile.settings.cursor || 'hand_up')
+    }
   }
 
   if (!tile.settings.content) {
     return null
   }
+  
   let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
   className += ' ' + tile.settings.align
   style.width = unitsDimension(tile, 'width', bounds, videoBounds)
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index b4183ce..3166848 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -73,7 +73,9 @@ export default class TileVideo extends Component {
     }
     let className = ['tile', tile.type].join(' ')
     if (tile.target_page_id || (viewing && tile.href)) {
-      className += ' ' + (tile.settings.cursor || 'hand_up')
+      if (viewing || tile.settings.cursor !== 'unclickable') {
+        className += ' ' + (tile.settings.cursor || 'hand_up')
+      }
     }
     // console.log(tile.settings)
     if (!tile.settings.url) {
-- 
cgit v1.2.3-70-g09d2