diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
4 files changed, 97 insertions, 3 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) { |