refactor(editor): Clean up audio code and add styles

serlo · Dec 22, 2024 · 150731e · 150731e
1 parent 36dedf1
commit 150731e
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 54 deletions.
diff --git a/packages/editor/src/plugins/audio/audio-player.tsx b/packages/editor/src/plugins/audio/audio-player.tsx
@@ -18,13 +18,10 @@ export function AudioPlayer({ audioFile }: AudioPlayerProps) {
   const audioURL =
     audioFile instanceof Blob ? URL.createObjectURL(audioFile) : audioFile
 
-  console.log({ isPlaying, currentTimePlaying, duration })
-
   useEffect(() => {
     const audioElement = audioRef.current
 
     if (!audioElement) {
-      console.warn('AudioRef not attached, event listeners will not register')
       return
     }
 
@@ -34,7 +31,6 @@ export function AudioPlayer({ audioFile }: AudioPlayerProps) {
     // }
 
     const handleMetadataLoad = () => {
-      console.log('HandleMetadataLoad called')
       setCorrectDuration()
     }
 
@@ -66,7 +62,6 @@ export function AudioPlayer({ audioFile }: AudioPlayerProps) {
     }
 
     const handleDurationChange = () => {
-      console.log('HandleDurationChange called', audioElement.duration)
       if (audioElement.duration === Infinity || isNaN(audioElement.duration)) {
         setDuration(0)
       } else {
@@ -93,10 +88,6 @@ export function AudioPlayer({ audioFile }: AudioPlayerProps) {
   }, [])
 
   useEffect(() => {
-    console.log(
-      'Audio File has changed. Resetting duration and current time playing',
-      { audioRef }
-    )
     // Reset states when the audio file changes
     setDuration(0)
     setCurrentTimePlaying(0)
@@ -156,7 +147,7 @@ export function AudioPlayer({ audioFile }: AudioPlayerProps) {
   }
 
   return (
-    <>
+    <div className="flex w-full items-center">
       <button
         onClick={togglePlay}
         className="border-editor-primary-400 bg-editor-primary-400 flex items-center rounded border p-4 "
@@ -175,33 +166,34 @@ export function AudioPlayer({ audioFile }: AudioPlayerProps) {
           />
         )}
       </button>
-      <div className="mx-2 flex w-full">
+      <div className="bg-editor-primary-500 relative mr-2 flex h-12 w-full items-center rounded-r-lg px-2">
         <audio ref={audioRef} src={audioURL} className="w-full" />
-
-        {/* Custom progress bar */}
-        <div className="relative w-full">
-          <div className="absolute  h-0.5 w-full -translate-y-1/2 transform bg-gray-300"></div>
+        <div className="relative w-full px-2">
+          {/* Background track */}
+          <div className="absolute h-1 w-full bg-gray-300"></div>
+          {/* Progress indicator */}
           <div
-            className="absolute  h-1 -translate-y-1/2 transform bg-gray-700"
+            className="absolute h-1 bg-gray-700"
             style={{ width: `${(currentTimePlaying / duration) * 100}%` }}
           />
+          {/* Draggable thumb. TODO Should make this interactive */}
           <div
-            className="absolute  h-2 w-2 -translate-y-1/2 transform rounded-full bg-gray-700"
+            className="absolute h-3 w-3 -translate-y-1/3 transform rounded-full bg-gray-700"
             style={{
               left: `${(currentTimePlaying / duration) * 100}%`,
             }}
           />
-          <div className="absolute bottom-1 left-0  text-xs">
+          {/* Time indicators */}
+          <div className="absolute -bottom-6 left-0 text-xs">
             {formatTime(Math.round(currentTimePlaying))}
           </div>
-          <div className="absolute bottom-1 right-0  text-xs">
-            {/* Only render the number if it's available */}
+          <div className="absolute -bottom-6 right-0 text-xs">
             {!Number.isNaN(duration) &&
               duration !== Infinity &&
               formatTime(Math.round(duration), false)}
           </div>
         </div>
       </div>
-    </>
+    </div>
   )
 }
diff --git a/packages/editor/src/plugins/audio/audio-recorder.tsx b/packages/editor/src/plugins/audio/audio-recorder.tsx
@@ -26,7 +26,6 @@ interface AudioRecorderProps {
 export function AudioRecorder({ source, setSource }: AudioRecorderProps) {
   const [status, setStatus] = useState<RecordingStatus>(RecordingStatus.IDLE)
 
-  // TODO get rid of this and just replace with source and setSource
   const [audioURL, setAudioURL] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [recordTime, setRecordTime] = useState(0)
@@ -73,11 +72,9 @@ export function AudioRecorder({ source, setSource }: AudioRecorderProps) {
         const audioBlob = new Blob(recordedChunks.current, {
           type: 'audio/wav',
         })
-        // blobToBase64(audioBlob)
 
         const url = URL.createObjectURL(audioBlob)
 
-        console.log('Audio url:', url)
         setAudioURL(url)
         setSource(url)
         setStatus(RecordingStatus.UPLOADED)
@@ -101,19 +98,6 @@ export function AudioRecorder({ source, setSource }: AudioRecorderProps) {
     }
   }
 
-  // const blobToBase64 = (blob: Blob) => {
-  //   const reader = new FileReader()
-  //   const loadEndHandler = function () {
-  //     const base64data = reader.result
-  //     setBase64AudioRecording(base64data as string)
-
-  //     showToastNotice(audioStrings.recordingSuccessfullyUploaded, 'success')
-  //     reader.removeEventListener('loadend', loadEndHandler)
-  //   }
-  //   reader.addEventListener('loadend', loadEndHandler)
-  //   reader.readAsDataURL(blob)
-  // }
-
   const deleteAudio = () => {
     if (mediaRecorderRef.current) {
       mediaRecorderRef.current = null
@@ -127,7 +111,6 @@ export function AudioRecorder({ source, setSource }: AudioRecorderProps) {
     setAudioURL(null)
     setRecordTime(0)
     setStatus(RecordingStatus.IDLE)
-    // setBase64AudioRecording('')
   }
 
   const stopRecording = () => {

diff --git a/packages/editor/src/plugins/audio/audio-recording-visualization.tsx b/packages/editor/src/plugins/audio/audio-recording-visualization.tsx
@@ -25,20 +25,11 @@ export const useAudioSurfer = ({ status }: { status: RecordingStatus }) => {
 
     const record = wavesurferRef.current?.registerPlugin(RecordPlugin.create())
 
-    // record.on('record-', function () {
-    //   console.info('Device ready!')
-    // })
-    // record.on('deviceError', function (code) {
-    //   console.warn('Device error: ' + code)
-    // })
-
     // start the visualization while recording!
     if (status === RecordingStatus.RECORDING) {
       record
         .startRecording()
-        .then(() => {
-          console.log('Recording started')
-        })
+        // eslint-disable-next-line no-console
         .catch((err) => void console.error('Error occurred', err))
     }
 

diff --git a/packages/editor/src/plugins/audio/editor.tsx b/packages/editor/src/plugins/audio/editor.tsx
@@ -2,18 +2,14 @@ import type { AudioProps } from '.'
 import { AudioRecorder } from './audio-recorder'
 import { AudioRenderer } from './renderer'
 import { AudioToolbar } from './toolbar'
-// import { useEditorStrings } from '@/contexts/logged-in-data-context'
 
 export const AudioEditor = (props: AudioProps) => {
   const { focused, state } = props
   const source = state.source.value
 
-  // Can this be false here?
+  // Can this ever be false here? I doubt we add a preview to the audio plugin
+  // toolbar, therefore I think we can safely remove this!
   const editable = true
-  console.log('AudioEditor rendered with source value (should be a url)', {
-    source,
-  })
-  // const audioStrings = useEditorStrings().plugins.audio
 
   return (
     <>

diff --git a/packages/editor/src/plugins/audio/renderer.tsx b/packages/editor/src/plugins/audio/renderer.tsx
@@ -12,6 +12,8 @@ interface AudioRendererProps {
 export function AudioRenderer({ source }: AudioRendererProps) {
   const { failed: failedString } = useStaticStrings().plugins.audio
 
+  // I guess we can render null here too if the source is missing! This is more
+  // in line how we treat empty image plugins.
   if (!source) {
     return (
       <div className="mx-side text-center print:hidden">

diff --git a/packages/editor/src/tailwind/tailwind-base.js b/packages/editor/src/tailwind/tailwind-base.js
@@ -12,6 +12,8 @@ const brandGreen = '#95bc1a'
 const sunflower = '#ffbe5e'
 const sunflowerColors = {
   DEFAULT: sunflower,
+  500: '#ffefda',
+  400: '#ffd8a6',
   300: sunflower,
   200: '#ffdaa3',
   100: '#fff1db',