implement audio volume fades within the skeleton dance video

4 files changed, 46 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 56bb4ab..a947e2a 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -125,3 +125,28 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
     </div>
   )
 }
+
+export const AnnotationFormVideoSetVolume = ({ annotation, handleSettingsChange }) => {
+  return (
+    <div className='options'>
+      <TextInput
+        title="Volume"
+        name="volume"
+        className="number"
+        placeholder="1.0"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      <TextInput
+        title="Fade Time"
+        name="duration"
+        className="number"
+        placeholder="0:01"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
index 7b95332..8a1be48 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
@@ -7,6 +7,7 @@ import {
 
 import {
   AnnotationFormVideo,
+  AnnotationFormVideoSetVolume,
 } from './annotationForm.video'
 
 import {
@@ -31,6 +32,7 @@ export const annotationFormLookup = {
 
   image: AnnotationFormImage,
   video: AnnotationFormVideo,
+  video_set_volume: AnnotationFormVideoSetVolume,
 
   gallery: AnnotationFormGallery,
   carousel: AnnotationFormGallery,
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
index 4533a5d..4ea9595 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
@@ -32,3 +32,20 @@ export const AnnotationVideo = ({ y, annotation, media, timeline, selected, onCl
     </div>
   )
 }
+
+export const AnnotationVideoSetVolume = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => {
+  const className = selected ? 'annotation utility video_set_volume selected' : 'annotation utility video_set_volume'
+  let style = {
+    top: y,
+  }
+  return (
+    <div
+      className={className}
+      style={style}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+    > 
+      Set volume to {annotation.settings.volume}
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
index 8fddee3..1a89dbd 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
@@ -12,6 +12,7 @@ import {
 
 import {
   AnnotationVideo,
+  AnnotationVideoSetVolume,
 } from './annotationTypes.video'
 
 import {
@@ -40,6 +41,7 @@ export const AnnotationElementLookup = {
   subtitle: React.memo(AnnotationSubtitle),
 
   video: React.memo(AnnotationVideo),
+  video_set_volume: React.memo(AnnotationVideoSetVolume),
 
   image: React.memo(AnnotationImage),
   gallery: React.memo(AnnotationGallery),