intro background. setvolume

9 files changed, 37 insertions, 9 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.player.js b/animism-align/frontend/app/views/viewer/nav/nav.player.js
index d4d5d8c..7c2050e 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.player.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.player.js
@@ -20,9 +20,8 @@ class NavPlayer extends Component {
 const mapStateToProps = state => ({
   playing: state.audio.playing,
   volume: state.audio.volume,
-  play_ts: state.audio.play_ts,
-  duration: state.align.timeline.duration,
+  play_ts: state.viewer.currentSection ? state.audio.play_ts - state.viewer.currentSection.start_ts : 0,
+  duration: state.viewer.currentSection ? state.viewer.currentSection.end_ts - state.viewer.currentSection.start_ts : 0,
 })
 
 export default connect(mapStateToProps)(NavPlayer)
-
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 8403865..2ca8dff 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -39,7 +39,7 @@ export const Arrow = React.memo(({ type }) => (
 // volume toggle
 
 export const VolumeControl = React.memo(({ volume }) => (
-  <div className={volume ? 'volume' : 'volume muted'} onClick={() => actions.audio.setVolume(setVolume ? 0.0 : 1.0)}>
+  <div className={volume ? 'volume' : 'volume muted'} onClick={() => actions.audio.setVolume(volume ? 0.0 : 1.0)}>
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
       <path d="M5,25h4.17l0,2.5H5V25z M15.33,27.5h4.17V20h-4.17V27.5z M20.5,27.5h4.17v-10H20.5V27.5z M25.67,27.5h4.17V15h-4.17V27.5z
        M30.83,27.5H35v-15h-4.17V27.5z M10.17,27.5h4.17v-5h-4.17V27.5z"/>
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
index d185722..7ac5997 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
@@ -8,14 +8,22 @@ export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, o
   const style = {
     backgroundImage: 'url(' + item.settings.file.url + ')',
   }
+  let lines = []
+  if (annotation.settings.title) {
+    lines = lines.concat(annotation.settings.title.split(/<br[^>]*>/))
+  }
+  if (annotation.settings.subtitle) {
+    lines = lines.concat(annotation.settings.subtitle.split(/<br[^>]*>/))
+  }
   return (
     <div
       className='site-intro'
       style={style}
     >
       <div className='inner'>
-        {annotation.settings.title && <span dangerouslySetInnerHTML={{ __html: annotation.settings.title }} />}
-        {annotation.settings.subtitle && <span dangerouslySetInnerHTML={{ __html: annotation.settings.subtitle }} />}
+        {lines.map((line, i) => (
+          <span key={i} dangerouslySetInnerHTML={{ __html: line }} />
+        ))}
       </div>
     </div>
   )
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
index dd2e6db..da83c4f 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
@@ -31,7 +31,7 @@ export const Gallery = ({ media, annotation }) => {
 }
 
 const GalleryItem = ({ image, caption }) => {
-  console.log(image)
+  // console.log(image)
   return (
     <div className='gallery-item'>
       <div className='gallery-image'>
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
index 5bba2d5..93b8696 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
@@ -26,7 +26,7 @@ export const Grid = ({ media, annotation }) => {
 }
 
 const GridItem = ({ image, caption }) => {
-  console.log(image)
+  // console.log(image)
   return (
     <div className='grid-item'>
       <div className='grid-image'>
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index dd63635..69abda2 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -168,9 +168,21 @@
   color: white;
   font-family: "Freight Text", serif;
   font-size: 12vh;
-  line-height: 1;
+  line-height: 1.3;
   text-align: center;
 }
+.site-intro .inner span {
+  box-shadow: -10px 0px 0 #000,
+               10px 0px 0 #000,
+              -10px 0px 0 #000,
+               10px 0px 0 #000;
+  box-decoration-break: clone;
+  background: black;
+  color: white;
+}
+
+/* schedule */
+
 .schedule {
   width: 45rem;
   display: flex;
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
index 0eb8b19..895c9dd 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
@@ -6,6 +6,9 @@ export const MediaGallery = ({ paragraph, media, currentParagraph, currentAnnota
   if (!media.lookup) return <div />
   const className = currentParagraph ? 'media current' : 'media'
   const annotation = paragraph.annotations[0]
+  if (annotation.settings.hide_in_transcript) {
+    return <div />
+  }
   const item = media.lookup[annotation.settings.media_id]
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
   return (
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js
index 9269461..4f4f960 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js
@@ -31,6 +31,9 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   if (!media.lookup) return <div />
   const className = currentParagraph ? 'media image current' : 'media image'
   const annotation = paragraph.annotations[0]
+  if (annotation.settings.hide_in_transcript) {
+    return <div />
+  }
   const item = media.lookup[annotation.settings.media_id]
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
   return (
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
index 6c2a05b..7cb03bb 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
@@ -6,6 +6,9 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
   if (!media.lookup) return <div />
   const className = currentParagraph ? 'media current' : 'media'
   const annotation = paragraph.annotations[0]
+  if (annotation.settings.hide_in_transcript) {
+    return <div />
+  }
   const item = media.lookup[annotation.settings.media_id]
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
   return (