very very basic styling of player transcript

7 files changed, 108 insertions, 10 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js
index 3c8c1e9..0340171 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -13,7 +13,7 @@ class PlayerContainer extends Component {
   }
 
   componentDidMount() {
-    console.log(this.props.sections)
+    // console.log(this.props.sections)
     this.setState({ currentSection: this.props.sections[0] })
   }
 
@@ -49,7 +49,7 @@ class PlayerContainer extends Component {
     // const { } = this.props
     const { currentSection } = this.state
     if (!currentSection) { return <div /> }
-    console.log(currentSection)
+    // console.log(currentSection)
     return (
       <div className='viewer-container'>
         <PlayerTranscript section={currentSection} />
diff --git a/animism-align/frontend/app/views/viewer/player/player.css b/animism-align/frontend/app/views/viewer/player/player.css
new file mode 100644
index 0000000..76a78eb
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/player.css
@@ -0,0 +1,4 @@
+.viewer-container {
+  position: absolute;
+  top: 0; left: 0;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
new file mode 100644
index 0000000..f9a9863
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -0,0 +1,89 @@
+.player-transcript {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.player-transcript .header,
+.player-transcript .paragraph {
+  font-family: "Freight Text", serif;
+  font-size: 3rem;
+  line-height: 1.28;
+  width: 70rem;
+  max-width: 80%;
+  margin: 0 auto;
+  padding-bottom: 2rem;
+}
+.player-transcript .header {
+  text-align: center;
+}
+.player-transcript .header:first-child {
+  margin-top: 8rem;
+}
+
+/* transcript scroll bar */
+
+.player-transcript::-webkit-scrollbar {
+  cursor: pointer;
+  user-select: none;
+  width: 4px
+}
+.player-transcript::-webkit-scrollbar-button {
+  display: block;
+  width: 0;
+  height: 0;
+}
+.player-transcript::-webkit-scrollbar-track-piece {
+  background:rgba(211,211,211,0.8);
+}
+.player-transcript::-webkit-scrollbar-thumb {
+  display: block;
+  background: #000;
+}
+
+/* paragraph subtypes */
+
+.player-transcript .header {
+  text-align: center;
+  padding-top: 2rem;
+}
+.player-transcript .header:first-of-type {
+  padding-top: 0;
+}
+.player-transcript .header span {
+}
+
+.player-transcript .paragraph,
+.player-transcript .hidden {
+}
+
+.player-transcript .blockquote {
+  padding-left: 2rem;
+  line-height: 1.45;
+}
+
+/* sentences */
+
+.player-transcript span {
+  margin-right: 4px;
+  box-shadow: 0 0 0 rgba(255,255,255,0.0);
+}
+.player-transcript .media span {
+  margin-right: 0;
+  border-bottom: 1px solid;
+  cursor: pointer;
+}
+
+.player-transcript .paragraph .current {
+  box-shadow: -5px -1px 0 #e8e8e8,
+               5px -1px 0 #e8e8e8,
+              -5px  1px 0 #e8e8e8,
+               5px  1px 0 #e8e8e8;
+  box-decoration-break: clone;
+  background: #e8e8e8;
+  color: #000;
+  transition: all 0.2s;
+}
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index 8c992e7..a315781 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -16,8 +16,9 @@ class PlayerTranscript extends Component {
     this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this)
   }
 
-  handleAnnotationClick(e, annotation) {
+  handleAnnotationClick(e, paragraph, annotation) {
     console.log(annotation)
+    actions.audio.seek(annotation.start_ts)
   }
   
   handleParagraphDoubleClick(e, paragraph) {
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
index 914b2b5..afd2fd1 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -20,7 +20,7 @@ class Transcript extends Component {
     actions.transcript.buildAllParagraphs()
   }
 
-  handleAnnotationClick(e, annotation) {
+  handleAnnotationClick(e, paragraph, annotation) {
     console.log(annotation)
   }
   
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index 6f476fc..5bf190e 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -10,6 +10,7 @@ import './nav/eflux.css'
 import './sections/sections.css'
 import './transcript/transcript.css'
 import './checklist/checklist.css'
+import './player/player.transcript.css'
 
 import actions from 'app/actions'
 import { Loader } from 'app/common'
diff --git a/animism-align/frontend/app/views/viewer/viewer.css b/animism-align/frontend/app/views/viewer/viewer.css
index da73216..d0f7177 100644
--- a/animism-align/frontend/app/views/viewer/viewer.css
+++ b/animism-align/frontend/app/views/viewer/viewer.css
@@ -32,12 +32,15 @@
 }
 
 .viewer-container {
-  width: 100%;
-  height: 100%;
-  transform: translateZ(0) translateX(0);
-  transition: transform 0.2s;
+  position: absolute;
+  top: 0; left: 0;
+  width: 100vw;
+  height: 100vh;
+  /*transform: translateZ(0) translateX(0);*/
+  transition: width 0.2s;
 }
 
-.viewer-container.transcript-open {
-  transform: translateZ(0) translateX(-31.875rem);
+.transcript-open .viewer-container {
+  /*transform: translateZ(0) translateX(-31.875rem);*/
+  width: calc(100vw - 31.875rem);
 }