Poder controlar el audio y su velocidad

2021-10-15 16:32:20 -03:00 · 2021-10-15 16:32:20 -03:00 · 1801de0a54
commit 1801de0a54
parent 61bd6fca46
1 changed files with 132 additions and 0 deletions
--- a/patches/0009-show-audio-controls-and-speed.diff
+++ b/patches/0009-show-audio-controls-and-speed.diff
@ -0,0 +1,132 @@
+diff -Naur orig.orig/components/commons/Audio.jsx orig/components/commons/Audio.jsx
+--- orig.orig/components/commons/Audio.jsx	1969-12-31 21:00:00.000000000 -0300
+++ orig/components/commons/Audio.jsx	2021-10-15 16:28:48.809523282 -0300
+@@ -0,0 +1,76 @@
+import { forwardRef, useState, useEffect } from 'react';
+
+// https://formidable.com/blog/2021/stores-no-context-api/
+const createEmitter = () => {
+  const subscriptions = new Map();
+  return {
+    emit: (v) => subscriptions.forEach(fn => fn(v)),
+    subscribe: (fn) => {
+      const key = Symbol();
+      subscriptions.set(key, fn);
+      return () => subscriptions.delete(key);
+    },
+  }
+};
+
+const createStore = (init) => {
+  // create an emitter
+  const emitter = createEmitter();
+
+  let store = null;
+  const get = () => store;
+  const set = (op) => (
+    store = op(store),
+    // notify all subscriptions when the store updates
+    emitter.emit(store)
+  );
+  store = init(get, set);
+
+  const useStore = () => {
+    // intitialize component with latest store
+    const [localStore, setLocalStore] = useState(get());
+
+    // update our local store when the global
+    // store updates. 
+    //
+    // emitter.subscribe returns a cleanup 
+    // function, so react will clean this
+    // up on unmount.
+    useEffect(() => emitter.subscribe(setLocalStore), []);
+    return localStore;
+  };
+  return useStore;
+};
+
+const useSpeed = createStore((get, set) => ({
+  value: 1,
+  set: value => set((state) => ({ ...state, value })),
+}));
+
+export const Audio = forwardRef((props, ref) => {
+  const [playing, setPlaying] = useState(false);
+  const { value, set } = useSpeed();
+
+  useEffect(() => {
+    ref.current.playbackRate = value
+  }, [value])
+
+  return (
+    <div
+      style={{
+        display: playing ? 'block' : 'none',
+        width: '100%',
+      }}
+    >
+      <audio
+        onPlay={() => {setPlaying(true)}}
+        onEnded={() => {setPlaying(false)}}
+        controls
+        ref={ref}
+      >
+        {props.children}
+      </audio>
+      <input type="range" min="0.25" max="2" step="0.25" onChange={e => { set(e.target.value) }} />
+    </div>
+  );
+});
+diff -Naur orig.orig/components/Lesson/LessonExercise/LessonExerciseHiddenAudio/LessonExerciseHiddenAudio.jsx orig/components/Lesson/LessonExercise/LessonExerciseHiddenAudio/LessonExerciseHiddenAudio.jsx
+--- orig.orig/components/Lesson/LessonExercise/LessonExerciseHiddenAudio/LessonExerciseHiddenAudio.jsx	2021-10-15 15:36:57.837243899 -0300
+++ orig/components/Lesson/LessonExercise/LessonExerciseHiddenAudio/LessonExerciseHiddenAudio.jsx	2021-10-15 15:47:52.469350865 -0300
+@@ -1,9 +1,10 @@
+ /* eslint-disable jsx-a11y/media-has-caption  */
+ import { forwardRef } from 'react';
+import { Audio } from '../../../commons/Audio';
+ 
+ export const LessonExerciseHiddenAudio = forwardRef(({ src }, ref) => (
+   <div className="exercise-audio-feedback">
+-    <audio
+    <Audio
+       className="exercise-audio-file feedback-audio initialized"
+       tabIndex="-1"
+       width="100%"
+@@ -11,6 +12,6 @@
+       ref={ref}
+     >
+       <source src={src} type="audio/MP3" />
+-    </audio>
+    </Audio>
+   </div>
+ ));
+diff -Naur orig.orig/components/Lesson/LessonExercise/LessonExerciseQuestion/QuestionTypes/LessonExerciseQuestionAudio.jsx orig/components/Lesson/LessonExercise/LessonExerciseQuestion/QuestionTypes/LessonExerciseQuestionAudio.jsx
+--- orig.orig/components/Lesson/LessonExercise/LessonExerciseQuestion/QuestionTypes/LessonExerciseQuestionAudio.jsx	2021-10-15 15:36:57.837243899 -0300
+++ orig/components/Lesson/LessonExercise/LessonExerciseQuestion/QuestionTypes/LessonExerciseQuestionAudio.jsx	2021-10-15 15:45:48.129327782 -0300
+@@ -2,6 +2,7 @@
+ import { useEffect, useRef, useState } from 'react';
+ import { createGlobalStyle } from 'styled-components';
+ import { useAudio } from '../../../../../hooks/useAudio';
+import { Audio } from '../../../../commons/Audio';
+ import { useTranslation } from '../../../../../hooks/useTranslation';
+ import { useFrontendConfig } from '../../../../../hooks/useFrontendConfig';
+ 
+@@ -62,7 +63,7 @@
+       >
+         <LessonExerciseQuestionAudioGlobalStyles />
+         {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+-        <audio
+        <Audio
+           className={`exercise-audio-file initialized${isPlaying ? ' playing-now' : ''}`}
+           tabIndex="0"
+           width="100%"
+@@ -73,7 +74,7 @@
+           ref={audioRef}
+         >
+           <source src={audioUrl} type="audio/MP3" />
+-        </audio>
+        </Audio>
+         <div className="bubble-text-audio">{audioLabel}</div>
+         <div className="exercise-play-audio" />
+       </a>