From 6e18c6e4ef6344f92fed99dad9c83484487c32d7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 16 Mar 2021 14:43:00 +0100
Subject: add units to links

---
 frontend/app/views/graph/graph.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'frontend/app/views/graph/graph.css')

diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index 389a55d..2805cb0 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -156,7 +156,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 8rem;
+  max-width: 12rem;
   user-select: none;
   cursor: arrow;
 }
-- 
cgit v1.2.3-70-g09d2


From 15d9d864b539e221c6494b3535abef724517f207 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 16 Mar 2021 18:19:26 +0100
Subject: uploading audio files and displaying them in a list

---
 cli/app/sql/models/upload.py                       |   4 +-
 frontend/app/types.js                              |   1 +
 frontend/app/views/graph/components/audio.list.js  | 150 +++++++++++++++++++++
 .../app/views/graph/components/graph.header.js     |   1 +
 frontend/app/views/graph/graph.actions.js          |   4 +
 frontend/app/views/graph/graph.container.js        |   2 +
 frontend/app/views/graph/graph.css                 |  53 ++++++++
 frontend/app/views/graph/graph.reducer.js          |  31 +++++
 static/img/icons_pause_white.svg                   |   6 +
 static/img/icons_play_white.svg                    |   6 +
 10 files changed, 256 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/views/graph/components/audio.list.js
 create mode 100755 static/img/icons_pause_white.svg
 create mode 100755 static/img/icons_play_white.svg

(limited to 'frontend/app/views/graph/graph.css')

diff --git a/cli/app/sql/models/upload.py b/cli/app/sql/models/upload.py
index 30e53dc..d9307ff 100644
--- a/cli/app/sql/models/upload.py
+++ b/cli/app/sql/models/upload.py
@@ -37,5 +37,5 @@ class Upload(Base):
 
   def url(self):
     if self.tag:
-      return join('/static/data_store/uploads', str(self.graph_id), self.tag, self.fn)
-    return join('/static/data_store/uploads', str(self.graph_id), self.fn)
+      return join('/static/uploads', str(self.graph_id), self.tag, self.fn)
+    return join('/static/uploads', str(self.graph_id), self.fn)
diff --git a/frontend/app/types.js b/frontend/app/types.js
index 7120a91..19d1e69 100644
--- a/frontend/app/types.js
+++ b/frontend/app/types.js
@@ -6,6 +6,7 @@ export const graph = crud_type('graph', [
   'show_add_page_form', 'hide_add_page_form', 'toggle_add_page_form',
   'show_edit_page_form', 'hide_edit_page_form', 'toggle_edit_page_form',
   'update_graph_page',
+  'toggle_audio_list',
 ])
 
 export const page = crud_type('page', [
diff --git a/frontend/app/views/graph/components/audio.list.js b/frontend/app/views/graph/components/audio.list.js
new file mode 100644
index 0000000..bd8fe16
--- /dev/null
+++ b/frontend/app/views/graph/components/audio.list.js
@@ -0,0 +1,150 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+
+class AudioList extends Component {
+  state = {
+    playing: false,
+    play_id: -1,
+  }
+
+  constructor(props) {
+    super(props)
+    this.toggleAudio = this.toggleAudio.bind(this)
+    this.upload = this.upload.bind(this)
+    this.audioDidEnd = this.audioDidEnd.bind(this)
+  }
+
+  componentDidMount() {
+    this.audioElement = document.createElement('audio')
+    this.audioElement.addEventListener('ended', this.audioDidEnd)
+  }
+
+  componentWillUnmount() {
+    this.audioElement.removeEventListener('ended', this.audioDidEnd)
+    this.audioElement.pause()
+    this.audioElement = null
+  }
+
+  audioDidEnd() {
+    this.setState({ playing: false })
+  }
+
+  upload(e) {
+    e.preventDefault()
+    document.body.className = ''
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i
+    if (!files.length) return
+    Array.from(files).forEach(file => this.uploadTaggedFile(file, 'audio', file.filename))
+  }
+
+  uploadTaggedFile(file, tag, fn) {
+    return new Promise((resolve, reject) => {
+      this.setState({ status: "Uploading " + tag + "..." })
+      const uploadData = {
+        tag,
+        file,
+        __file_filename: fn,
+        graph_id: this.props.graph.id,
+        username: 'swimmer',
+      }
+      // console.log(uploadData)
+      return actions.upload.upload(uploadData).then(data => {
+        // console.log(data)
+        resolve({
+          ...data.res,
+        })
+      })
+    })
+  }
+
+  destroyFile(upload) {
+    return new Promise((resolve, reject) => {
+      actions.upload.destroy(upload)
+      .then(() => {
+        console.log('Destroy successful')
+        resolve()
+      })
+      .catch(() => {
+        console.log('Error deleting the file')
+        reject()
+      })
+    })
+  }
+
+  toggleAudio(upload) {
+    console.log(upload)
+    let playing = false
+    if (this.state.play_id === upload.id && this.state.playing) {
+      this.audioElement.pause()
+    } else {
+      this.audioElement.src = upload.url
+      this.audioElement.currentTime = 0
+      this.audioElement.play()
+      playing = true
+    }
+    this.setState({
+      playing,
+      play_id: upload.id,
+    })
+  }
+
+  render() {
+    const { playing, play_id } = this.state
+    const { graph } = this.props
+    // console.log(graph.uploads)
+    console.log(playing, play_id)
+    return (
+      <div className='box audioList'>
+        <div className="uploadButton">
+          <button>
+            <span>
+              {"Upload an audio file"}
+            </span>
+          </button>
+          <input
+            type="file"
+            accept="audio/mp3"
+            onChange={this.upload}
+            required={this.props.required}
+          />
+        </div>
+        {graph.uploads.map(upload => (
+          <div className='audioItem' key={upload.id} onClick={() => this.toggleAudio(upload)} >
+            <img
+              className='playButton'
+              src={
+                (playing && play_id === upload.id)
+                ? "/static/img/icons_pause_white.svg"
+                : "/static/img/icons_play_white.svg"
+              }
+            />
+            <div className='title'>
+              <div>{unslugify(upload.fn)}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+const unslugify = fn => fn.replace(/-/g, ' ').replace(/_/g, ' ').replace('.mp3', '')
+
+const mapStateToProps = state => ({
+  graph: state.graph.show.res,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(AudioList)
+
+
+/*
+ - upload new audio file
+ */
\ No newline at end of file
diff --git a/frontend/app/views/graph/components/graph.header.js b/frontend/app/views/graph/components/graph.header.js
index b969400..0766580 100644
--- a/frontend/app/views/graph/components/graph.header.js
+++ b/frontend/app/views/graph/components/graph.header.js
@@ -14,6 +14,7 @@ function GraphHeader(props) {
       </div>
       <div>
         <button onClick={() => props.graphActions.toggleAddPageForm()}>+ Add page</button>
+        <button onClick={() => props.graphActions.toggleAudioList()}>+ Audio</button>
       </div>
     </header>
   )
diff --git a/frontend/app/views/graph/graph.actions.js b/frontend/app/views/graph/graph.actions.js
index a24ccc2..eba3f92 100644
--- a/frontend/app/views/graph/graph.actions.js
+++ b/frontend/app/views/graph/graph.actions.js
@@ -25,6 +25,10 @@ export const toggleEditPageForm = () => dispatch => {
   dispatch({ type: types.graph.toggle_edit_page_form })
 }
 
+export const toggleAudioList = () => dispatch => {
+  dispatch({ type: types.graph.toggle_audio_list })
+}
+
 export const updateGraphPage = page => dispatch => {
   dispatch({ type: types.graph.update_graph_page, page })
 }
diff --git a/frontend/app/views/graph/graph.container.js b/frontend/app/views/graph/graph.container.js
index 9e354fc..34c3d9d 100644
--- a/frontend/app/views/graph/graph.container.js
+++ b/frontend/app/views/graph/graph.container.js
@@ -15,6 +15,7 @@ import PageEdit from './components/page.edit'
 
 import GraphHeader from './components/graph.header'
 import GraphEditor from './components/graph.editor'
+import AudioList from './components/audio.list'
 
 class GraphContainer extends Component {
   componentDidMount() {
@@ -63,6 +64,7 @@ class GraphContainer extends Component {
           <div className='sidebar'>
             {this.props.graph.editor.addingPage && <PageNew />}
             {this.props.graph.editor.editingPage && <PageEdit />}
+            {this.props.graph.editor.showingAudio && <AudioList />}
           </div>
         </div>
       </div>
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index 2805cb0..c6ef115 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -146,6 +146,59 @@
   width: 5.5rem; 
 }
 
+/* Upload area */
+
+.box .uploadButton {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.uploadButton input[type=file] {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+}
+.audioList .audioItem {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.125rem 0;
+}
+.audioList .playButton {
+  background: transparent;
+  border: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+  opacity: 0.8;
+}
+.audioList .title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  overflow: hidden;
+  flex: 1;
+}
+.audioList .title div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+  width: 100%;
+}
+.audioList .audioItem:hover {
+  background: rgba(255,255,255,0.2);
+}
+.audioList .audioItem:hover .title {
+  color: #fff;
+}
+.audioList .audioItem:hover .playButton {
+  opacity: 1.0;
+}
+
 /* Graph handles */
 
 .handle {
diff --git a/frontend/app/views/graph/graph.reducer.js b/frontend/app/views/graph/graph.reducer.js
index 6be5089..30049b5 100644
--- a/frontend/app/views/graph/graph.reducer.js
+++ b/frontend/app/views/graph/graph.reducer.js
@@ -7,6 +7,7 @@ const initialState = crudState('graph', {
   editor: {
     addingPage: false,
     editingPage: false,
+    showingAudio: false,
   },
   options: {
   }
@@ -36,6 +37,19 @@ export default function graphReducer(state = initialState, action) {
         }
       }
 
+    case types.upload.upload_complete:
+      console.log(action)
+      return {
+        ...state,
+        show: {
+          ...state.show,
+          res: {
+            ...state.show.res,
+            uploads: state.show.res.uploads.concat(action.data.res)
+          }
+        }
+      }
+
     case types.graph.show_add_page_form:
       return {
         ...state,
@@ -43,6 +57,7 @@ export default function graphReducer(state = initialState, action) {
           ...state.editor,
           addingPage: true,
           editingPage: false,
+          showingAudio: false,
         }
       }
 
@@ -52,6 +67,7 @@ export default function graphReducer(state = initialState, action) {
         editor: {
           ...state.editor,
           addingPage: false,
+          showingAudio: false,
         }
       }
 
@@ -62,6 +78,7 @@ export default function graphReducer(state = initialState, action) {
           ...state.editor,
           addingPage: !state.editor.addingPage,
           editingPage: false,
+          showingAudio: false,
         }
       }
 
@@ -72,6 +89,7 @@ export default function graphReducer(state = initialState, action) {
           ...state.editor,
           addingPage: false,
           editingPage: true,
+          showingAudio: false,
         }
       }
 
@@ -81,6 +99,7 @@ export default function graphReducer(state = initialState, action) {
         editor: {
           ...state.editor,
           editingPage: false,
+          showingAudio: false,
         }
       }
 
@@ -91,6 +110,18 @@ export default function graphReducer(state = initialState, action) {
           ...state.editor,
           addingPage: false,
           editingPage: !state.editor.editingPage,
+          showingAudio: false,
+        }
+      }
+
+    case types.graph.toggle_audio_list:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingPage: false,
+          editingPage: false,
+          showingAudio: !state.editor.showingAudio,
         }
       }
 
diff --git a/static/img/icons_pause_white.svg b/static/img/icons_pause_white.svg
new file mode 100755
index 0000000..59c7e60
--- /dev/null
+++ b/static/img/icons_pause_white.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
+<path fill='#ffffff' d="M14.34,12.5h4.16v15h-4.16V12.5z M21.5,27.5h4.17v-15H21.5V27.5z"/>
+</svg>
diff --git a/static/img/icons_play_white.svg b/static/img/icons_play_white.svg
new file mode 100755
index 0000000..78ff002
--- /dev/null
+++ b/static/img/icons_play_white.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
+<polygon fill='#ffffff' points="12.5,11 12.5,29 27.5,20 "/>
+</svg>
-- 
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/graph/graph.css')

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/graph/graph.css')

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 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/views/graph/graph.css')

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