hide on click

3 files changed, 29 insertions, 6 deletions

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