allow toggling waveform visualizer

nwaughachukwuma · Nov 1, 2024 · 753b357 · 753b357
1 parent d5308ba
commit 753b357
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 47 deletions.
diff --git a/pages/audiocast.py b/pages/audiocast.py
@@ -21,31 +21,31 @@ async def render_audiocast_page():
         # Display audiocast content
         st.title("🎧 Audiora")
         st.subheader("Share Page ")
-        st.markdown(f"#### Viewing audiocast: {session_id}")
+        st.markdown(f"##### Viewing audiocast: _{session_id}_")
 
         try:
             with st.spinner("Loading audiocast..."):
                 audiocast = cast(GenerateAudiocastDict, get_audiocast(session_id))
 
-                share_url = render_audiocast_handler(session_id, audiocast)
+            share_url = render_audiocast_handler(session_id, audiocast)
 
-                share_col, restart_row = st.columns(2, vertical_alignment="bottom")
+            share_col, restart_row = st.columns(2, vertical_alignment="bottom")
 
-                with share_col:
-                    if st.button("Copy Share link", use_container_width=True):
-                        pyperclip.copy(share_url)
-                        st.session_state.show_copy_success = True
+            with share_col:
+                if st.button("Copy Share link", use_container_width=True):
+                    pyperclip.copy(share_url)
+                    st.session_state.show_copy_success = True
 
-                with restart_row:
-                    if st.button("Create your Audiocast", use_container_width=True):
-                        navigate_to_home()
+            with restart_row:
+                if st.button("Create your Audiocast", use_container_width=True):
+                    navigate_to_home()
 
-                if st.session_state.get("show_copy_success", False):
-                    st.session_state.show_copy_succes = False
-                    st.success("Share link copied successfully!", icon="✅")
+            if st.session_state.get("show_copy_success", False):
+                st.session_state.show_copy_succes = False
+                st.success("Share link copied successfully!", icon="✅")
 
-                if audiocast["created_at"]:
-                    st.markdown(f"> Created: {audiocast["created_at"]}")
+            if audiocast["created_at"]:
+                st.markdown(f"> Created: {audiocast["created_at"]}")
 
         except Exception as e:
             st.error(f"Error loading audiocast: {str(e)}")

diff --git a/src/utils/render_audiocast_utils.py b/src/utils/render_audiocast_utils.py
@@ -29,18 +29,40 @@ def render_audiocast_handler(session_id: str, audiocast: GenerateAudiocastDict):
     # Audio player
     st.audio(audiocast["url"])
 
-    # Create placeholder for visualization
-    with st.expander("Show Waveform Visualization"):
-        # with st.container():
-        try:
-            render_waveform(session_id, audiocast["url"])
-        except Exception as e:
-            st.error(f"Error rendering waveform: {str(e)}")
+    st.markdown("---")
+
+    col1, _ = st.columns([4, 1])
+    with col1:
+
+        def toggle_show_waveform():
+            st.session_state.show_waveform = not st.session_state.get("show_waveform")
+
+        button_label = (
+            "Hide Waveform Visualization"
+            if st.session_state.get("show_waveform")
+            else "Show Waveform Visualization"
+        )
+
+        st.button(
+            button_label,
+            on_click=toggle_show_waveform,
+            use_container_width=True,
+        )
+
+        if st.session_state.get("show_waveform"):
+            try:
+                render_waveform(session_id, audiocast["url"])
+            except Exception as e:
+                st.error(f"Error rendering waveform: {str(e)}")
+
+    st.markdown("---")
 
     # Transcript
     with st.expander("Show Transcript"):
         st.markdown(parse_ai_script(audiocast["script"]))
 
+    st.markdown("---")
+
     # Metadata
     st.sidebar.subheader("Audiocast Source")
     st.sidebar.markdown(audiocast["source_content"])

diff --git a/src/utils/waveform_utils.py b/src/utils/waveform_utils.py
@@ -48,31 +48,7 @@ def render_waveform(session_id: str, audio_path: str):
         # st.video(str(video_path), autoplay=True)
         with open(video_path, "rb") as video_file:
             video_bytes = video_file.read()
-            # st.video(video_bytes, autoplay=True)
-        st.markdown(
-            f"""
-            <style>
-            .video-container {{
-                position: relative;
-                width: 100%;
-                max-width: 640px; /* 16:9 aspect ratio for width */
-                height: 240px; /* Fixed height */
-            }}
-            .video-container video {{
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                background-color: transparent; /* Set background to transparent */
-            }}
-            </style>
-            <div class="video-container">
-                <video autoplay loop muted playsinline style="border:none;">
-                    <source src="data:video/mp4;base64,{video_bytes.hex()}" type="video/mp4">
-                </video>
-            </div>
-            """,
-            unsafe_allow_html=True,
-        )
+            st.video(video_bytes, autoplay=True)
 
         download_waveform_video(str(video_path))
     except Exception as e: