Feature/non blocking mobile warning

src/WholeApp.js

@@ -10,6 +10,7 @@ import scales from "./data/scalesObj";
 import { MobileView } from 'react-device-detect';
 import Popup from 'reactjs-popup';
 import SoundLibraryNames from "data/TonejsSoundNames";
+import * as Tone from "tone";
 
 // TODO:to meet the requirements for router-dom v6 useParam hook can not be used in class Components and props.match.params only works in v5:
 //This is using a wrapper function for wholeApp because wholeApp is a class and not a functional component, REWRITE wholeApp to a const wholeApp =()=>{...}
@@ -362,6 +363,19 @@ class WholeApp extends Component {
   //     });
   // }
 
+  // Safari audio fix - resume audio context on first user interaction
+  resumeAudioContext = async () => {
+    if (Tone.context.state !== "running") {
+      await Tone.context.resume();
+      await Tone.start();
+      console.log("Audio context resumed for Safari");
+    }
+    // Remove listeners after first interaction
+    document.removeEventListener("click", this.resumeAudioContext);
+    document.removeEventListener("touchstart", this.resumeAudioContext);
+    document.removeEventListener("keydown", this.resumeAudioContext);
+  };
+
   componentDidMount() {
     /**
      * disable right click
@@ -370,6 +384,11 @@ class WholeApp extends Component {
       return false;
     };
 
+    // Safari/iOS audio fix - add listeners to resume audio context on first user interaction
+    document.addEventListener("click", this.resumeAudioContext);
+    document.addEventListener("touchstart", this.resumeAudioContext);
+    document.addEventListener("keydown", this.resumeAudioContext);
+
     // const { match } = this.props;
     // const { params } = match;
 
@@ -396,6 +415,13 @@ class WholeApp extends Component {
     */
   }
 
+  componentWillUnmount() {
+    // Cleanup Safari audio fix listeners
+    document.removeEventListener("click", this.resumeAudioContext);
+    document.removeEventListener("touchstart", this.resumeAudioContext);
+    document.removeEventListener("keydown", this.resumeAudioContext);
+  }
+
   toggleMenu = () => {
     this.setState({ menuOpen: !this.state.menuOpen });
   };
@@ -470,17 +496,25 @@ class WholeApp extends Component {
           />
         </div>
         <MobileView>
-          <div className="blackout"></div>
-          <Popup trigger={<div/>} modal open={true} closeOnDocumentClick={false}>
-            <div style={{
-              "backgroundColor": "white",
-              "fontSize": "12px",
-              "width": "100%",
-              "padding": "5px",
-              "textAlign": "center"
-            }}>
-              <h3>Notio does not have mobile support yet.</h3>
-              <h3>Please use a computer</h3>
+          <Popup
+            open={true}
+            closeOnDocumentClick={false}
+            contentStyle={{
+              position: "fixed",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              border: "2px solid black",
+              padding: "20px",
+              backgroundColor: "white",
+              zIndex: 9999,
+              textAlign: "center",
+            }}
+            trigger={<div />}
+          >
+            <div>
+              <h3 style={{ margin: 0, fontSize: '14px' }}>Notio has limited mobile support.</h3>
+              <p style={{ margin: '5px 0 0 0', fontSize: '12px' }}>Please use a computer for the best experience.</p>
             </div>
           </Popup>
         </MobileView>

src/components/menu/CustomVideoPlayer.js

@@ -4,21 +4,6 @@ import ReactPlayer from "react-player/lazy";
 import { Tabs, Tab, Form, Button } from "react-bootstrap";
 import Overlay from "../OverlayPlugins/Overlay";
 
-/**
- * CustomVideoPlayer - A customizable video player component
- *
- * Displays video content in an overlay/modal with:
- * - Default URL from settings (US1)
- * - Custom URL entry (US2)
- * - Reset to default functionality (US3)
- * - Draggable overlay display (US4)
- *
- * @param {string} defaultVideoUrl - Required. The original default video URL (used for reset)
- * @param {string} currentVideoUrl - Optional. The current video URL to display
- * @param {function} onClose - Required. Callback when overlay closes
- * @param {string} initialTab - Optional. Initial tab to display ('Player' or 'Enter_url')
- * @param {function} onUrlChange - Optional. Callback when video URL changes
- */
 // Helper to detect ReverbNation URLs
 const isReverbNationUrl = (url) => {
   return url && url.includes("reverbnation.com");
@@ -64,18 +49,20 @@ const getYouTubePlaylistEmbedUrl = (url) => {
   return url;
 };
 
-// Get ReactPlayer config based on URL type
-const getPlayerConfig = (url) => {
-  return {
-    youtube: {
-      playerVars: {
-        modestbranding: 1,
-        rel: 0,
-      },
+// ReactPlayer config for YouTube
+const PLAYER_CONFIG = {
+  youtube: {
+    playerVars: {
+      modestbranding: 1,
+      rel: 0,
     },
-  };
+  },
 };
 
+/**
+ * CustomVideoPlayer - A customizable video player component
+ * Supports YouTube, Vimeo, direct video files, YouTube playlists, and ReverbNation
+ */
 const CustomVideoPlayer = (props) => {
   const { defaultVideoUrl, currentVideoUrl, onClose, initialTab, onUrlChange } = props;
 
@@ -89,9 +76,8 @@ const CustomVideoPlayer = (props) => {
   const isReverbNation = isReverbNationUrl(currentUrl);
   const isPlaylistOnly = isYouTubePlaylistOnly(currentUrl);
 
-  // US1: onReady handler
+  // US1: onReady handler - don't auto-play to avoid audio context conflicts
   const handlePlayerReady = () => {
-    setIsPlaying(true);
     setError(null);
   };
 
@@ -167,7 +153,6 @@ const CustomVideoPlayer = (props) => {
                 frameBorder="0"
                 scrolling="no"
                 title="ReverbNation Player"
-                allow="autoplay"
                 style={{ minHeight: "300px" }}
               />
             ) : isPlaylistOnly ? (
@@ -178,7 +163,7 @@ const CustomVideoPlayer = (props) => {
                 height="100%"
                 frameBorder="0"
                 title="YouTube Playlist"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowFullScreen
                 style={{ minHeight: "300px" }}
               />
@@ -192,7 +177,7 @@ const CustomVideoPlayer = (props) => {
                 controls={true}
                 onReady={handlePlayerReady}
                 onError={handlePlayerError}
-                config={getPlayerConfig(currentUrl)}
+                config={PLAYER_CONFIG}
               />
             )}
             {error && !isReverbNation && !isPlaylistOnly && (