arrows and tmp volume icon

1 files changed, 97 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
new file mode 100644
index 0000000..c65c2e6
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -0,0 +1,97 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import { timestamp } from 'app/utils'
+
+// arrows
+
+const arrows = {
+  down: (
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+      <polygon points="10.06,16.14 9.51,16.98 20,23.86 30.49,16.98 29.94,16.14 20,22.66" />
+    </svg>
+  ),
+  up: (
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+      <polygon points="10.06,23.86 9.51,23.02 20,16.14 30.49,23.02 29.94,23.86 20,17.34" />
+    </svg>
+  ),
+  right: (
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 20 40">
+      <polygon points="16.98,30.49 16.14,29.94 22.66,20 16.14,10.06 16.98,9.51 23.86,20" />
+    </svg>
+  ),
+  left: (
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 20 40">
+      <polygon points="23.02,30.49 16.14,20 23.02,9.51 23.86,10.06 17.34,20 23.86,29.94" />
+    </svg>
+  ),
+}
+
+export const Arrow = React.memo(({ type }) => (
+  <div className={'arrow ' + type}>
+    {arrows[type]}
+  </div>
+))
+
+
+// volume toggle
+
+const VolumeIcon = React.memo(({ muted }) => (
+  <div className={muted ? 'volume muted' : 'volume'} onClick={() => actions.audio.toggleMuted()}>
+    <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"/>
+    </svg>
+  </div>
+))
+
+export const VolumeControl = connect(state => ({
+  muted: state.audio.muted,
+}))(VolumeIcon)
+
+
+// play / pause button
+
+const PlayIcon = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+    <polygon points="12.5,11 12.5,29 27.5,20 " />
+  </svg>
+)
+const PauseIcon = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+    <path d="M14.34,12.5h4.16v15h-4.16V12.5z M21.5,27.5h4.17v-15H21.5V27.5z" />
+  </svg>
+)
+
+const PlayButtonIcon = ({ playing }) => {
+  return (
+    <div
+      className='playToggle'
+      onClick={() => playing ? actions.audio.pause() : actions.audio.play()}
+    >
+      {playing ? PauseIcon : PlayIcon}
+    </div>
+  )
+}
+
+export const PlayButton = connect(state => ({
+  playing: state.audio.playing,
+}))(PlayButtonIcon)
+
+
+// player current time
+
+const PlayerTimeSpan = ({ play_ts, duration }) => (
+  <span className='playerTime'>
+    {timestamp(play_ts)}
+    {' / '}
+    {timestamp(duration)}
+  </span>
+)
+
+export const PlayerTime = connect(state => ({
+  play_ts: state.audio.play_ts,
+  duration: state.align.timeline.duration,
+}))(PlayerTimeSpan)