From d165a0727e42349d935ab3ee287242f1e5029742 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 17 Mar 2021 18:11:26 +0100
Subject: frontend. export/view button. interactivity sanity check

---
 frontend/site/audio/audio.player.js | 43 +++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 frontend/site/audio/audio.player.js

(limited to 'frontend/site/audio')

diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
new file mode 100644
index 0000000..9a2d783
--- /dev/null
+++ b/frontend/site/audio/audio.player.js
@@ -0,0 +1,43 @@
+export default class AudioPlayer {
+  players = {}
+
+  play({ item, restart, loop }) {
+    return new Promise((resolve, reject) => {
+      const { id, url } = item
+      if (id in players) {
+        if (restart) {
+          players[id].currentTime = 0
+          players[id].play()
+          return resolve()
+        }
+        return reject()
+      }
+      const player = document.createElement('audio')
+      const handleEnded = () => {
+        unbind()
+        resolve()
+      }
+      const handleError = (error) => {
+        console.error(error)
+        unbind()
+        reject(error)
+      }
+      const bind = () => {
+        player.addEventListener('ended', handleEnded)
+        player.addEventListener('error', handleError)
+        this.players[id] = player
+      }
+      const unbind = () => {
+        player.removeEventListener('ended', handleEnded)
+        player.removeEventListener('error', handleError)
+        delete this.players[id]
+      }
+      const start = () => {
+        player.src = url
+        player.play()
+      }
+      bind()
+      start()
+    })
+  }
+}
-- 
cgit v1.2.3-70-g09d2


From 2313cc4bb4d6c511c76d28020c1c97e6a5eb0a4d Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 17 Mar 2021 18:36:14 +0100
Subject: audio actually playing

---
 frontend/site/audio/audio.player.js      | 31 +++++++++++++++++++++++++++----
 frontend/site/audio/audio.reducer.js     | 18 ++++++++++++++++++
 frontend/site/store.js                   |  5 +++--
 frontend/site/viewer/viewer.container.js | 12 +++++++++---
 4 files changed, 57 insertions(+), 9 deletions(-)
 create mode 100644 frontend/site/audio/audio.reducer.js

(limited to 'frontend/site/audio')

diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index 9a2d783..acf2f52 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -1,13 +1,36 @@
 export default class AudioPlayer {
+  files = {}
   players = {}
 
-  play({ item, restart, loop }) {
+  load(graph) {
+    this.files = graph.uploads
+    .filter(upload => upload.tag === 'audio')
+    .reduce((accumulator, item) => {
+      accumulator[item.id] = item
+      return accumulator
+    }, {})
+    console.log(this.files)
+  }
+
+  playPage(page) {
+    console.log(page.settings)
+    const { background_audio_id, restart_audio } = page.settings
+    if (background_audio_id in this.files) {
+      this.playFile({
+        item: this.files[background_audio_id],
+        restart: !!restart_audio,
+      })
+    }
+  }
+
+  playFile({ item, restart, loop }) {
     return new Promise((resolve, reject) => {
       const { id, url } = item
-      if (id in players) {
+      console.log('play >>', id, url)
+      if (id in this.players) {
         if (restart) {
-          players[id].currentTime = 0
-          players[id].play()
+          this.players[id].currentTime = 0
+          this.players[id].play()
           return resolve()
         }
         return reject()
diff --git a/frontend/site/audio/audio.reducer.js b/frontend/site/audio/audio.reducer.js
new file mode 100644
index 0000000..f0bf0e9
--- /dev/null
+++ b/frontend/site/audio/audio.reducer.js
@@ -0,0 +1,18 @@
+import AudioPlayer from 'site/audio/audio.player'
+import * as types from 'site/types'
+
+const initialState = {
+  player: new AudioPlayer(),
+}
+
+export default function audioReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  switch (action.type) {
+    case types.site.loaded:
+      state.player.load(action.data.graph)
+      return state
+
+    default:
+      return state
+  }
+}
diff --git a/frontend/site/store.js b/frontend/site/store.js
index 5cb1a1b..60c3116 100644
--- a/frontend/site/store.js
+++ b/frontend/site/store.js
@@ -4,17 +4,18 @@ import { createBrowserHistory } from 'history'
 import thunk from 'redux-thunk'
 
 import siteReducer from 'site/site/site.reducer'
-import AudioPlayer from 'site/audio/audio.player'
+import audioReducer from 'site/audio/audio.reducer'
 
 const createRootReducer = history => (
   combineReducers({
     auth: (state = {}) => state,
     router: connectRouter(history),
+    audio: audioReducer,
     site: siteReducer,
   })
 )
 
-const configureStore = (initialState = { audio: audioPlayer }, history) => {
+const configureStore = (initialState = {}, history) => {
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 
   const store = createStore(
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 3f1c9c5..71c6bba 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -51,11 +51,12 @@ class ViewerContainer extends Component {
     const page_path = ["", graph_name, page_name].join('/')
     const { pages, home_page } = this.props.graph
     const page = pages[page_path] || pages[home_page]
-    if (!this.props.interactive && hasAutoplayVideo(page)) {
+    if (!this.props.interactive && hasAutoplay(page)) {
       this.setState({ page, roadblock: true })
     } else {
       this.setState({ page, roadblock: false })
       actions.site.interact()
+      this.props.audio.player.playPage(page)
     }
   }
 
@@ -103,8 +104,10 @@ class ViewerContainer extends Component {
   }
 
   removeRoadblock() {
+    console.log("remove roadblock")
     actions.site.interact()
     this.setState({ roadblock: false })
+    this.props.audio.player.playPage(this.state.page)
   }
   
   renderRoadblock() {
@@ -120,14 +123,17 @@ class ViewerContainer extends Component {
   }
 }
 
-const hasAutoplayVideo = page => {
-  return page.tiles.some(tile => {
+const hasAutoplay = page => {
+  const hasAutoplayVideo = page.tiles.some(tile => {
     return tile.type === 'video' && !tile.settings.muted
   })
+  const hasAutoplayAudio = page.settings.background_audio_id > 0
+  return hasAutoplayAudio || hasAutoplayVideo
 }
 
 const mapStateToProps = state => ({
   site: state.site,
+  audio: state.audio,
   graph: state.site.graph,
   interactive: state.site.interactive,
 })
-- 
cgit v1.2.3-70-g09d2


From d9fc65fe05f534691597586f25a2f168364ae1cf Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 17 Mar 2021 18:58:04 +0100
Subject: cancel playback if background audio id changes

---
 frontend/app/views/page/components/tile.handle.js |  35 ++-----
 frontend/site/audio/audio.player.js               | 117 ++++++++++++++--------
 frontend/site/viewer/viewer.container.js          |  11 +-
 3 files changed, 97 insertions(+), 66 deletions(-)

(limited to 'frontend/site/audio')

diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
index 090069d..d7b5d05 100644
--- a/frontend/app/views/page/components/tile.handle.js
+++ b/frontend/app/views/page/components/tile.handle.js
@@ -94,31 +94,16 @@ const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick })
         content = "SCRIPT"
       }
   }
-  if (viewing && tile.href) {
-    if (tile.href.indexOf('http') === 0) {
-      return (
-        <a href={tile.href} rel='noopener'>
-          <div
-            className={className}
-            style={style}
-          >
-            {content}
-          </div>
-        </a>
-      )
-    } else {
-      return (
-        <Link to={tile.href}>
-          <div
-            className={className}
-            onMouseDown={onMouseDown}
-            style={style}
-          >
-            {content}
-          </div>
-        </Link>
-      )
-    }
+  if (viewing) {
+    return (
+      <div
+        className={className}
+        onMouseDown={onMouseDown}
+        style={style}
+      >
+        {content}
+      </div>
+    )
   } else {
     return (
       <div
diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index acf2f52..42ff53f 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -1,6 +1,11 @@
 export default class AudioPlayer {
   files = {}
   players = {}
+  current_background_id = 0
+
+  constructor() {
+    this.done = this.done.bind(this)
+  }
 
   load(graph) {
     this.files = graph.uploads
@@ -9,13 +14,25 @@ export default class AudioPlayer {
       accumulator[item.id] = item
       return accumulator
     }, {})
-    console.log(this.files)
+  }
+
+  done(id) {
+    console.log('remove', id)
+    delete this.players[id]
   }
 
   playPage(page) {
-    console.log(page.settings)
     const { background_audio_id, restart_audio } = page.settings
+    console.log('playPage', background_audio_id)
+    if (
+      this.current_background_id
+      && this.current_background_id !== background_audio_id
+      && this.current_background_id in this.players
+    ) {
+      this.players[this.current_background_id].stop()
+    }
     if (background_audio_id in this.files) {
+      this.current_background_id = background_audio_id
       this.playFile({
         item: this.files[background_audio_id],
         restart: !!restart_audio,
@@ -24,43 +41,65 @@ export default class AudioPlayer {
   }
 
   playFile({ item, restart, loop }) {
-    return new Promise((resolve, reject) => {
-      const { id, url } = item
-      console.log('play >>', id, url)
-      if (id in this.players) {
-        if (restart) {
-          this.players[id].currentTime = 0
-          this.players[id].play()
-          return resolve()
-        }
-        return reject()
-      }
-      const player = document.createElement('audio')
-      const handleEnded = () => {
-        unbind()
-        resolve()
-      }
-      const handleError = (error) => {
-        console.error(error)
-        unbind()
-        reject(error)
+    const { id } = item
+    if (id in this.players) {
+      if (restart) {
+        this.players[id].restart()
       }
-      const bind = () => {
-        player.addEventListener('ended', handleEnded)
-        player.addEventListener('error', handleError)
-        this.players[id] = player
-      }
-      const unbind = () => {
-        player.removeEventListener('ended', handleEnded)
-        player.removeEventListener('error', handleError)
-        delete this.players[id]
-      }
-      const start = () => {
-        player.src = url
-        player.play()
-      }
-      bind()
-      start()
-    })
+      return this.players[id]
+    } else {
+      this.players[id] = new Player(item, this.done)
+      this.players[id].play()
+      return this.players[id]
+    }
+  }
+}
+
+class Player {
+  constructor(item, done) {
+    this.item = item
+    this.done = done
+    this.audio = document.createElement('audio')
+    this.handleEnded = this.handleEnded.bind(this)
+    this.handleError = this.handleError.bind(this)
+    this.release = this.release.bind(this)
+    this.audio.addEventListener('ended', this.handleEnded)
+    this.audio.addEventListener('error', this.handleError)
+    this.audio.src = item.url
+  }
+
+  release() {
+    this.audio.removeEventListener('ended', this.handleEnded)
+    this.audio.removeEventListener('error', this.handleError)
+    this.done(this.item.id)
+    this.item = null
+    this.done = null
+    this.audio = null
+  }
+
+  handleError(error) {
+    console.error(error)
+    this.release()
+  }
+
+  handleEnded() {
+    this.release()
+  }
+
+  play() {
+    console.log('play', this.item.id)
+    this.audio.play()
+  }
+
+  restart() {
+    console.log('replay', this.item.id)
+    this.audio.currentTime = 0
+    this.audio.play()
+  }
+
+  stop() {
+    console.log('stop', this.item.id)
+    this.audio.pause()
+    this.release()
   }
 }
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 71c6bba..314d243 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -3,6 +3,7 @@ import { Route } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
+import { history } from 'site/store'
 import actions from 'site/actions'
 import { Loader } from 'app/common/loader.component'
 import TileHandle from 'app/views/page/components/tile.handle'
@@ -61,11 +62,16 @@ class ViewerContainer extends Component {
   }
 
   handleMouseDown(e, tile) {
-    // console.log(tile)
+    console.log(tile)
+    if (tile.href.indexOf('http') === 0) {
+      window.location.href = tile.href
+    } else {
+      history.push(tile.href)
+    }
   }
 
   render() {
-    const { page } = this.state
+    const { page, audio } = this.state
     if (this.state.roadblock) {
       return this.renderRoadblock()
     }
@@ -92,6 +98,7 @@ class ViewerContainer extends Component {
                 viewing
                 key={tile.id}
                 tile={tile}
+                audio={audio}
                 bounds={this.state.bounds}
                 onMouseDown={e => this.handleMouseDown(e, tile)}
                 onDoubleClick={e => {}}
-- 
cgit v1.2.3-70-g09d2


From 31776745681b8a7d03d53b9c7d227762336e6fdf Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 17 Mar 2021 19:15:36 +0100
Subject: play audio on click and navigate when finished

---
 frontend/app/views/page/components/tile.form.js |  6 ++--
 frontend/site/audio/audio.player.js             | 46 ++++++++++++++++++++-----
 frontend/site/viewer/viewer.container.js        | 37 ++++++++++++--------
 3 files changed, 63 insertions(+), 26 deletions(-)

(limited to 'frontend/site/audio')

diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
index d6272bc..4fb00a3 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/page/components/tile.form.js
@@ -153,7 +153,7 @@ const newPosition = (data) => ({
   has_audio: false,
   audio_on_click_id: 0,
   audio_on_hover_id: 0,
-  wait_for_audio_on_click: false,
+  navigate_when_audio_finishes: false,
   ...data,
 })
 
@@ -778,8 +778,8 @@ class TileForm extends Component {
 
             <Checkbox
               label="Navigate when audio finishes"
-              name="wait_for_audio_on_click"
-              checked={temporaryTile.settings.wait_for_audio_on_click}
+              name="navigate_when_audio_finishes"
+              checked={temporaryTile.settings.navigate_when_audio_finishes}
               onChange={this.handleSettingsSelect}
               autoComplete="off"
             />
diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index 42ff53f..eea0acf 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -1,3 +1,5 @@
+import { history } from 'site/store'
+
 export default class AudioPlayer {
   files = {}
   players = {}
@@ -16,6 +18,13 @@ export default class AudioPlayer {
     }, {})
   }
 
+  has(id) {
+    return (
+      (id > 0) &&
+      (id in this.files)
+    )
+  }
+
   done(id) {
     console.log('remove', id)
     delete this.players[id]
@@ -31,24 +40,41 @@ export default class AudioPlayer {
     ) {
       this.players[this.current_background_id].stop()
     }
-    if (background_audio_id in this.files) {
+    if (this.has(background_audio_id)) {
       this.current_background_id = background_audio_id
       this.playFile({
-        item: this.files[background_audio_id],
+        id: background_audio_id,
+        type: 'background',
         restart: !!restart_audio,
       })
     }
   }
 
-  playFile({ item, restart, loop }) {
-    const { id } = item
+  playTile({ tile, type }) {
+    let id = type === 'click'
+      ? tile.settings.audio_on_click_id
+      : type === 'hover'
+      ? tile.settings.audio_on_hover_id
+      : null
+    if (this.has(id)) {
+      this.playFile({ id, tile, type })
+    }
+  }
+
+  playFile({ id, tile, type, restart, loop }) {
+    const item = this.files[id]
     if (id in this.players) {
       if (restart) {
         this.players[id].restart()
       }
       return this.players[id]
     } else {
-      this.players[id] = new Player(item, this.done)
+      this.players[id] = new Player({
+        item,
+        tile,
+        type,
+        done: this.done
+      })
       this.players[id].play()
       return this.players[id]
     }
@@ -56,8 +82,10 @@ export default class AudioPlayer {
 }
 
 class Player {
-  constructor(item, done) {
+  constructor({ item, tile, type, done }) {
     this.item = item
+    this.tile = tile
+    this.type = type
     this.done = done
     this.audio = document.createElement('audio')
     this.handleEnded = this.handleEnded.bind(this)
@@ -69,6 +97,9 @@ class Player {
   }
 
   release() {
+    if (this.type === 'click' && this.tile && this.tile.settings.navigate_when_audio_finishes) {
+      history.push(this.tile.href)
+    }
     this.audio.removeEventListener('ended', this.handleEnded)
     this.audio.removeEventListener('error', this.handleError)
     this.done(this.item.id)
@@ -87,18 +118,15 @@ class Player {
   }
 
   play() {
-    console.log('play', this.item.id)
     this.audio.play()
   }
 
   restart() {
-    console.log('replay', this.item.id)
     this.audio.currentTime = 0
     this.audio.play()
   }
 
   stop() {
-    console.log('stop', this.item.id)
     this.audio.pause()
     this.release()
   }
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 314d243..1c8be43 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -38,15 +38,6 @@ class ViewerContainer extends Component {
     actions.site.interact()
   }
 
-  handleResize() {
-    this.setState({
-      bounds: {
-        width: window.innerWidth,
-        height: window.innerHeight,
-      }
-    })
-  }
-
   load() {
     const { graph_name, page_name } = this.props.match.params
     const page_path = ["", graph_name, page_name].join('/')
@@ -61,12 +52,30 @@ class ViewerContainer extends Component {
     }
   }
 
+  handleResize() {
+    this.setState({
+      bounds: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      }
+    })
+  }
+
   handleMouseDown(e, tile) {
-    console.log(tile)
-    if (tile.href.indexOf('http') === 0) {
-      window.location.href = tile.href
-    } else {
-      history.push(tile.href)
+    if (tile.href) {
+      if (tile.href.indexOf('http') === 0) {
+        window.location.href = tile.href
+        return
+      }
+      else if (!tile.settings.navigate_when_audio_finishes) {
+        history.push(tile.href)
+      }
+    }
+    if (tile.settings.audio_on_click_id > 0) {
+      this.props.audio.player.playTile({
+        type: "click",
+        tile,
+      })
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From 66563242eebaa92cf3b0c7dfdc70d0d1051be9ab Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 17 Mar 2021 20:43:54 +0100
Subject:  pointr vnts non

---
 frontend/app/views/page/components/tile.form.js   |  1 +
 frontend/app/views/page/components/tile.handle.js |  5 +--
 frontend/app/views/page/cursors.css               |  4 +++
 frontend/site/audio/audio.player.js               |  2 +-
 frontend/site/site/site.reducer.js                |  2 +-
 static/site.css                                   | 44 +++++++++++++----------
 6 files changed, 34 insertions(+), 24 deletions(-)

(limited to 'frontend/site/audio')

diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
index 4fb00a3..aefecf1 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/page/components/tile.form.js
@@ -60,6 +60,7 @@ const CURSORS = [
   { name: 'hand_down', label: 'Down', },
   { name: 'hand_left', label: 'Left', },
   { name: 'hand_right', label: 'Right', },
+  { name: 'unclickable', label: 'Unclickable', },
 ]
 
 const NO_LINK = 0
diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
index 917be74..d8184d3 100644
--- a/frontend/app/views/page/components/tile.handle.js
+++ b/frontend/app/views/page/components/tile.handle.js
@@ -1,12 +1,9 @@
 import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
 
 export default class TileHandle extends Component {
   constructor(props) {
     super(props)
-    if (props.tile.type === 'video') {
-      this.videoRef = React.createRef()
-    }
+    this.videoRef = React.createRef()
     this.handleEnded = this.handleEnded.bind(this)
   }
   componentDidMount() {
diff --git a/frontend/app/views/page/cursors.css b/frontend/app/views/page/cursors.css
index 778b614..6cc37a9 100644
--- a/frontend/app/views/page/cursors.css
+++ b/frontend/app/views/page/cursors.css
@@ -13,6 +13,10 @@
 .tile.hand_left {
   cursor: url(/static/img/hand_left.png) 10 60, pointer;
 }
+.tile.unclickable {
+  cursor: default;
+  pointer-events: none;
+}
 .tile.none {
   cursor: default;
 }
diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index eea0acf..d6bc807 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -32,7 +32,7 @@ export default class AudioPlayer {
 
   playPage(page) {
     const { background_audio_id, restart_audio } = page.settings
-    console.log('playPage', background_audio_id)
+    console.log('playPage', page)
     if (
       this.current_background_id
       && this.current_background_id !== background_audio_id
diff --git a/frontend/site/site/site.reducer.js b/frontend/site/site/site.reducer.js
index e0b53fb..9763e48 100644
--- a/frontend/site/site/site.reducer.js
+++ b/frontend/site/site/site.reducer.js
@@ -9,7 +9,7 @@ const initialState = {
 }
 
 export default function siteReducer(state = initialState, action) {
-  console.log(action.type, action)
+  // console.log(action.type, action)
   switch (action.type) {
     case types.site.set_site_title:
       return {
diff --git a/static/site.css b/static/site.css
index 08135de..a42f15a 100644
--- a/static/site.css
+++ b/static/site.css
@@ -1,6 +1,8 @@
-
-* { box-sizing: border-box; }
-html, body {
+* {
+  box-sizing: border-box;
+}
+html,
+body {
   margin: 0;
   padding: 0;
   width: 100%;
@@ -10,7 +12,7 @@ body {
   background: #000;
   color: #ddd;
   overflow: hidden;
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
   height: 100%;
   width: 100%;
@@ -59,13 +61,13 @@ body {
 }
 
 @font-face {
-  font-family: 'Roboto';
-  src: url('SITE_PATH/static/fonts/Roboto-Bold.ttf') format('truetype');
+  font-family: "Roboto";
+  src: url("SITE_PATH/static/fonts/Roboto-Bold.ttf") format("truetype");
   font-weight: bold;
 }
 @font-face {
-  font-family: 'Roboto';
-  src: url('SITE_PATH/static/fonts/Roboto-BoldItalic.ttf') format('truetype');
+  font-family: "Roboto";
+  src: url("SITE_PATH/static/fonts/Roboto-BoldItalic.ttf") format("truetype");
   font-weight: bold;
   font-style: italic;
 }
@@ -82,23 +84,23 @@ body {
 }
 */
 @font-face {
-  font-family: 'Roboto';
-  src: url('SITE_PATH/static/fonts/Roboto-Medium.ttf') format('truetype');
+  font-family: "Roboto";
+  src: url("SITE_PATH/static/fonts/Roboto-Medium.ttf") format("truetype");
   font-weight: 300;
 }
 @font-face {
-  font-family: 'Roboto';
-  src: url('SITE_PATH/static/fonts/Roboto-MediumItalic.ttf') format('truetype');
+  font-family: "Roboto";
+  src: url("SITE_PATH/static/fonts/Roboto-MediumItalic.ttf") format("truetype");
   font-style: italic;
   font-weight: 300;
 }
 @font-face {
-  font-family: 'Roboto';
-  src: url('SITE_PATH/static/fonts/Roboto-Regular.ttf') format('truetype');
+  font-family: "Roboto";
+  src: url("SITE_PATH/static/fonts/Roboto-Regular.ttf") format("truetype");
 }
 @font-face {
-  font-family: 'Roboto';
-  src: url('SITE_PATH/static/fonts/Roboto-Italic.ttf') format('truetype');
+  font-family: "Roboto";
+  src: url("SITE_PATH/static/fonts/Roboto-Italic.ttf") format("truetype");
   font-style: italic;
 }
 /*
@@ -114,7 +116,6 @@ body {
 }
 */
 
-
 .tile.hand_up {
   cursor: url(SITE_PATH/static/img/hand_up.png) 40 10, pointer;
 }
@@ -127,8 +128,15 @@ body {
 .tile.hand_left {
   cursor: url(SITE_PATH/static/img/hand_left.png) 10 60, pointer;
 }
+.tile.unclickable {
+  cursor: default;
+  pointer-events: none;
+}
+.tile.none {
+  cursor: default;
+}
 
 .tile.link {
   border: 0 !important;
   background: transparent !important;
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2


From baf406f060ee7f840771d45932dfd8279d551561 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 17 Mar 2021 21:50:56 +0100
Subject: add tile to player.. but i think i wanna do this diffrntly

---
 frontend/site/audio/audio.player.js | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'frontend/site/audio')

diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index d6bc807..0dacdce 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -67,6 +67,10 @@ export default class AudioPlayer {
       if (restart) {
         this.players[id].restart()
       }
+      if (tile && !this.players[id].tile) {
+        this.players[id].tile = tile
+        this.players[id].type = type
+      }
       return this.players[id]
     } else {
       this.players[id] = new Player({
-- 
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/site/audio')

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 3b1d8d3416b27744287c7dc85ceede31e56e4dce Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 23 Mar 2021 16:20:09 +0100
Subject: hide on click

---
 frontend/app/views/tile/components/tile.form.js |  9 +++++++++
 frontend/site/audio/audio.player.js             |  6 +++++-
 frontend/site/viewer/viewer.container.js        | 20 +++++++++++++++-----
 3 files changed, 29 insertions(+), 6 deletions(-)

(limited to 'frontend/site/audio')

diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 8f6fe83..8a6a08e 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -946,6 +946,7 @@ class TileForm extends Component {
         <Checkbox
           label="Wait to appear"
           name="wait_to_appear"
+          className='short'
           checked={temporaryTile.settings.wait_to_appear}
           onChange={this.handleSettingsSelect}
           autoComplete="off"
@@ -961,6 +962,14 @@ class TileForm extends Component {
             />
           </div>
         )}
+        <Checkbox
+          label="Hide on click"
+          name="hide_on_click"
+          className='short'
+          checked={temporaryTile.settings.hide_on_click}
+          onChange={this.handleSettingsSelect}
+          autoComplete="off"
+        />
       </div>
     )
   }
diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index 9914cd6..17edeee 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -118,7 +118,11 @@ class Player {
   }
 
   handleEnded() {
-    this.release()
+    if (this.type === 'background') {
+      this.restart()
+    } else {
+      this.release()
+    }
   }
 
   play() {
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index f68a1d3..9bf4442 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -16,6 +16,7 @@ class ViewerContainer extends Component {
     bounds: { width: window.innerWidth, height: window.innerHeight },
     roadblock: false,
     popups: {},
+    hidden: {},
     time: 0,
     maxDeferTime: 0,
   }
@@ -48,9 +49,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, popups: {}, roadblock: true })
+      this.setState({ page, popups: {}, hidden: {}, roadblock: true })
     } else {
-      this.setState({ page, popups: {}, roadblock: false })
+      this.setState({ page, popups: {}, hidden: {}, roadblock: false })
       actions.site.interact()
       this.props.audio.player.playPage(page)
       this.resetTimer(page)
@@ -94,7 +95,7 @@ class ViewerContainer extends Component {
           popups: {
             ...this.state.popups,
             [tile.settings.target_popup]: true,
-          }
+          },
         })
       }
       else if (tile.href === '__close_popup') {
@@ -102,7 +103,7 @@ class ViewerContainer extends Component {
           popups: {
             ...this.state.popups,
             [tile.settings.target_popup]: false,
-          }
+          },
         })
       }
       else if (!tile.settings.navigate_when_audio_finishes) {
@@ -115,6 +116,14 @@ class ViewerContainer extends Component {
         tile,
       })
     }
+    if (tile.settings.hide_on_click) {
+      this.setState({
+        hidden: {
+          ...this.state.hidden,
+          [tile.id]: true,
+        }
+      })
+    }
   }
 
   handlePlaybackEnded(tile) {
@@ -124,7 +133,7 @@ class ViewerContainer extends Component {
   }
 
   render() {
-    const { page, audio, popups, time } = this.state
+    const { page, audio, popups, hidden, time } = this.state
     if (this.state.roadblock) {
       return this.renderRoadblock()
     }
@@ -152,6 +161,7 @@ class ViewerContainer extends Component {
           {page.tiles.map(tile => {
             if (tile.settings.is_popup && !popups[tile.settings.popup_group]) return
             if (tile.settings.appear_after && time < tile.settings.appear_after) return
+            if (tile.settings.hide_on_click && hidden[tile.id]) return
             return (
               <TileHandle
                 viewing
-- 
cgit v1.2.3-70-g09d2