nora text placement

3 files changed, 82 insertions, 15 deletions

diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index 4f33d9d..e6e8f44 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -25,6 +25,13 @@ export default class AudioPlayer {
     )
   }
 
+  stop(id) {
+    if (this.players[id]) {
+      this.players[id].type = "done"
+      this.players[id].stop()
+    }
+  }
+
   done(id) {
     // console.log('remove', id)
     delete this.players[id]
@@ -34,10 +41,7 @@ export default class AudioPlayer {
     const { background_audio_id, restart_audio, stop_all_sounds } = page.settings
     // console.log('playPage', page)
     if (stop_all_sounds) {
-      Object.keys(this.players).forEach(id => {
-        this.players[id].type = "done"
-        this.players[id].stop(true)
-      })
+      Object.keys(this.players).forEach(id => this.stop(id))
     } else if (
       this.current_background_id
       && this.current_background_id !== background_audio_id
@@ -88,6 +92,17 @@ export default class AudioPlayer {
       return this.players[id]
     }
   }
+
+  playURL({ id, url }) {
+    this.players[id] = new Player({
+      item: { id, url },
+      tile: { settings: {} },
+      type: "url",
+      done: this.done
+    })
+    this.players[id].play()
+    return this.players[id]
+  }
 }
 
 class Player {
diff --git a/frontend/site/projects/museum/text-overlays.js b/frontend/site/projects/museum/text-overlays.js
index c00bf82..45a3a58 100644
--- a/frontend/site/projects/museum/text-overlays.js
+++ b/frontend/site/projects/museum/text-overlays.js
@@ -36,8 +36,14 @@ export const TEXT_OVERLAYS = {
   },
   'nora-nefertiti': {
     style: {
-      bottom: "4rem",
-      right: "1rem",
+      top: "5vh",
+      right: "10vw",
+    },
+    textStyle: {
+      right: "0",
+      top: "0",
+      color: "white",
+      width: "40vw",
     },
     text: `
       <h2>Nature/Nefertiti</h2>
@@ -49,8 +55,16 @@ export const TEXT_OVERLAYS = {
 
   'nora-horus-2': {
     style: {
-      bottom: "4rem",
-      right: "1rem",
+      top: "60vh",
+      right: "51vw",
+    },
+    textStyle: {
+      right: "13vw",
+      top: "auto",
+      bottom: "20vh",
+      color: "white",
+      width: "40vw",
+      background: "rgba(0,0,0,0.3)",
     },
     text: `
       <h2>Horus/Her</h2>
@@ -61,8 +75,15 @@ export const TEXT_OVERLAYS = {
   },
   'nora-peg-stairs-close': {
     style: {
-      top: "1rem",
-      right: "1rem",
+      top: "31rem",
+      right: "31rem",
+    },
+    textStyle: {
+      right: "10vw",
+      top: "auto",
+      bottom: "32vh",
+      color: "white",
+      width: "40vw",
     },
     text: `
       <h2>Foundation Peg/Nin</h2>
@@ -73,8 +94,12 @@ export const TEXT_OVERLAYS = {
   },
   'nora-lamassu-2': {
     style: {
-      top: "1rem",
-      right: "1rem",
+      bottom: "40vh",
+      right: "60vw",
+    },
+    textStyle: {
+      color: "white",
+      width: "40vw",
     },
     text: `
       <h2>Lamma</h2>
@@ -85,8 +110,14 @@ export const TEXT_OVERLAYS = {
   },
   'nora-queen-of-night': {
     style: {
-      bottom: "4rem",
-      left: "1rem",
+      top: "50vh",
+      left: "61vw",
+    },
+    textStyle: {
+      top: "50vh",
+      left: "57vw",
+      color: "white",
+      maxWidth: "40vw",
     },
     text: `
       <h2>Queen of the Hacker Night</h2>
@@ -100,6 +131,7 @@ export const TEXT_OVERLAYS = {
 
   'stankievech-1': {
     popup: "stars",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame01-24sec.mp3",
     style: {
       width: "40vw",
       left: "5vw",
@@ -118,6 +150,7 @@ export const TEXT_OVERLAYS = {
   },
   'stankievech-2': {
     popup: "temple",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame02-33sec.mp3",
     style: {
       width: "40vw",
       left: "3vw",
@@ -128,13 +161,14 @@ export const TEXT_OVERLAYS = {
     text: `
       <h2>An Exhibition of Clammy Solitude</h2>
       <p>
-        If an artist could see the world through the eyes of a caterpillar he might be able to make some fascinating art. Each one of these secret dens was also the entrance to the abyss. Dungeons that dropped away from the eyes into a damp cosmos of fungus and mold-an exhibition of clammy solitude. The double aspect of Quetzalcoatl is less a person than an operation of totemic perception. Quetzalcoatl becomes one half of an enantiomorph (coatl means twin) in search of the other half. A mirror looking for its reflection but never quite finding it. The morning star of Quetzal is apt to be polarized in the shadowy reflection of the evening star. 
+        If an artist could see the world through the eyes of a caterpillar he might be able to make some fascinating art. Each one of these secret dens was also the entrance to the abyss. Dungeons that dropped away from the eyes into a damp cosmos of fungus and mold—an exhibition of clammy solitude. The double aspect of Quetzalcoatl is less a person than an operation of totemic perception. Quetzalcoatl becomes one half of an enantiomorph (coatl means twin) in search of the other half. A mirror looking for its reflection but never quite finding it. The morning star of Quetzal is apt to be polarized in the shadowy reflection of the evening star. 
       </p>
       <div style="text-align: right">Robert Smithson, <i>Incidents of Mirror-Travel in the Yucatan</i>, 1969</div>
     `
   },
   'stankievech-3': {
     popup: "hypercard",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame03-24sec.mp3",
     style: {
       width: "40vw",
       right: "5vw",
@@ -153,6 +187,7 @@ export const TEXT_OVERLAYS = {
   },
   'stankievech-4': {
     popup: "vr",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame04-30sec.mp3",
     style: {
       width: "40vw",
       left: "5vw",
@@ -172,6 +207,7 @@ export const TEXT_OVERLAYS = {
   },
   'stankievech-5': {
     popup: "magritte",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame05-36sec.mp3",
     style: {
       width: "40vw",
       right: "5vw",
@@ -189,6 +225,7 @@ export const TEXT_OVERLAYS = {
   },
   'stankievech-6': {
     popup: "trinity",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame06-46sec.mp3",
     style: {
       width: "40vw",
       left: "5vw",
diff --git a/frontend/site/projects/museum/views/text.overlay.js b/frontend/site/projects/museum/views/text.overlay.js
index 9627901..cb141e7 100644
--- a/frontend/site/projects/museum/views/text.overlay.js
+++ b/frontend/site/projects/museum/views/text.overlay.js
@@ -25,10 +25,24 @@ class TextOverlay extends Component {
     if (this.props.location.pathname !== prevProps.location.pathname) {
       this.load()
     }
+    if (
+      this.props.popups !== prevProps.popups
+      && this.state.content
+      && this.state.content.popup
+      && this.props.popups[this.state.content.popup]
+      && this.state.content.audio_url
+    ) {
+      this.props.audio.player.stop("text-overlay")
+      this.props.audio.player.playURL({
+        id: "text-overlay",
+        url: this.state.content.audio_url,
+      })
+    }
   }
 
   load() {
     const { page_name } = this.props.match.params
+    this.props.audio.player.stop("text-overlay")
     if (TEXT_OVERLAYS[page_name]) {
       this.setState({
         content: TEXT_OVERLAYS[page_name],
@@ -78,6 +92,7 @@ class TextOverlay extends Component {
 }
 
 const mapStateToProps = state => ({
+  audio: state.audio,
   popups: state.site.popups,
   interactive: state.site.interactive,
 })