From a6e40bac001fb412c47b3da420052ce2939fb55c Mon Sep 17 00:00:00 2001 From: Ojas_Srivastava Date: Mon, 15 Jun 2026 12:20:29 +0530 Subject: [PATCH] mobile support added --- README.md | 45 +++++++++------ _update_readme.py | 138 ++++++++++++++++++++++++++++++++++++++++++++++ start_webapp.bat | 27 +++++++++ start_webapp.sh | 34 ++++++++++++ 4 files changed, 227 insertions(+), 17 deletions(-) create mode 100644 _update_readme.py create mode 100644 start_webapp.bat create mode 100644 start_webapp.sh diff --git a/README.md b/README.md index 871462d..81f5d9d 100644 --- a/README.md +++ b/README.md @@ -109,36 +109,47 @@ All devices in the room will start playing in sync after the lead-in. ## Running the Web App -Run on **every device** that should participate: +### Quick start (recommended) -```bash -python webapp.py --name --port 8080 -``` +Two launcher scripts are provided so you don't need to type any Python command manually. -Example: +**Option A — Double-click (Windows)** -```bash -# Device A -python webapp.py --name LivingRoom --port 8080 +Double-click `start_webapp.bat`. It locates Git Bash automatically and starts the app. -# Device B -python webapp.py --name Bedroom --port 8080 +**Option B — Git Bash** + +```bash +bash start_webapp.sh ``` -On startup the app prints two URLs: +Either way the terminal prints the exact URL to open on your phone: ``` -[web] open locally: http://127.0.0.1:8080 -[web] open on LAN: http://192.168.1.10:8080 + ╔══════════════════════════════════════════╗ + ║ MuSync Web App ║ + ╠══════════════════════════════════════════╣ + ║ Open on this PC : http://127.0.0.1:8080 ║ + ║ Open on phone : http://192.168.1.xx:8080 ║ + ╚══════════════════════════════════════════╝ + + On your phone: connect to the same Wi-Fi, + then open the URL above in your browser. ``` -Open the **LAN URL** from any browser on the same network to control that device. +> **Phone access:** your phone must be on the **same Wi-Fi** as the PC. Open the `http://:8080` URL in any mobile browser — no app install required. + +### Manual start (alternative) + +```bash +python webapp.py --name --port 8080 +``` ### Step-by-step (Web App) **1. Create a room on one device** -- Open the device's web UI in a browser. +- Open the device's web UI (use the LAN URL on a phone). - Under **Room**, type a room name and click **Create**. - Note the room ID and code shown in the Room badge. @@ -154,13 +165,13 @@ Open the **LAN URL** from any browser on the same network to control that device - Click **Scan** to list supported audio files. - Click **Play** next to any file. -All devices in the room will start playing in sync. +All devices in the room will start playing in sync after the lead-in. **4. Stop playback** - Click **Stop** in the Playback panel. -> **Note:** The music folder path is resolved on the computer running `webapp.py`, not the browser. Devices only need the audio files on the machine acting as host. +> **Note:** The music folder path is resolved on the computer running `webapp.py`, not the browser. Audio files only need to exist on the machine that clicks **Play**. --- diff --git a/_update_readme.py b/_update_readme.py new file mode 100644 index 0000000..7bd6b6f --- /dev/null +++ b/_update_readme.py @@ -0,0 +1,138 @@ +import re, pathlib + +readme = pathlib.Path("README.md") +content = readme.read_text(encoding="utf-8") + +OLD = """## Running the Web App + +Run on **every device** that should participate: + +```bash +python webapp.py --name --port 8080 +``` + +Example: + +```bash +# Device A +python webapp.py --name LivingRoom --port 8080 + +# Device B +python webapp.py --name Bedroom --port 8080 +``` + +On startup the app prints two URLs: + +``` +[web] open locally: http://127.0.0.1:8080 +[web] open on LAN: http://192.168.1.10:8080 +``` + +Open the **LAN URL** from any browser on the same network to control that device. + +### Step-by-step (Web App) + +**1. Create a room on one device** + +- Open the device's web UI in a browser. +- Under **Room**, type a room name and click **Create**. +- Note the room ID and code shown in the Room badge. + +**2. Join the room on every other device** + +- Open each device's web UI. +- Under **Room**, enter the **Room ID** and **Code** from step 1. +- Click **Join**. + +**3. Scan and play a file from the host device** + +- Under **Playback**, enter the path to a folder on *that computer* (e.g. `C:\\Users\\You\\Music` or `test_source`). +- Click **Scan** to list supported audio files. +- Click **Play** next to any file. + +All devices in the room will start playing in sync. + +**4. Stop playback** + +- Click **Stop** in the Playback panel. + +> **Note:** The music folder path is resolved on the computer running `webapp.py`, not the browser. Devices only need the audio files on the machine acting as host.""" + +NEW = """## Running the Web App + +### Quick start (recommended) + +Two launcher scripts are provided so you don't need to type any Python command manually. + +**Option A — Double-click (Windows)** + +Double-click `start_webapp.bat`. It locates Git Bash automatically and starts the app. + +**Option B — Git Bash** + +```bash +bash start_webapp.sh +``` + +Either way the terminal prints the exact URL to open on your phone: + +``` + ╔══════════════════════════════════════════╗ + ║ MuSync Web App ║ + ╠══════════════════════════════════════════╣ + ║ Open on this PC : http://127.0.0.1:8080 ║ + ║ Open on phone : http://192.168.1.xx:8080 ║ + ╚══════════════════════════════════════════╝ + + On your phone: connect to the same Wi-Fi, + then open the URL above in your browser. +``` + +> **Phone access:** your phone must be on the **same Wi-Fi** as the PC. Open the `http://:8080` URL in any mobile browser — no app install required. + +### Manual start (alternative) + +```bash +python webapp.py --name --port 8080 +``` + +### Step-by-step (Web App) + +**1. Create a room on one device** + +- Open the device's web UI (use the LAN URL on a phone). +- Under **Room**, type a room name and click **Create**. +- Note the room ID and code shown in the Room badge. + +**2. Join the room on every other device** + +- Open each device's web UI. +- Under **Room**, enter the **Room ID** and **Code** from step 1. +- Click **Join**. + +**3. Scan and play a file from the host device** + +- Under **Playback**, enter the path to a folder on *that computer* (e.g. `C:\\Users\\You\\Music` or `test_source`). +- Click **Scan** to list supported audio files. +- Click **Play** next to any file. + +All devices in the room will start playing in sync after the lead-in. + +**4. Stop playback** + +- Click **Stop** in the Playback panel. + +> **Note:** The music folder path is resolved on the computer running `webapp.py`, not the browser. Audio files only need to exist on the machine that clicks **Play**.""" + +if OLD in content: + readme.write_text(content.replace(OLD, NEW), encoding="utf-8") + print("README updated OK") +else: + # Try normalising line endings and retry + content_lf = content.replace("\r\n", "\n") + old_lf = OLD.replace("\r\n", "\n") + if old_lf in content_lf: + readme.write_text(content_lf.replace(old_lf, NEW), encoding="utf-8") + print("README updated OK (normalised CRLF)") + else: + print("ERROR: target section not found") diff --git a/start_webapp.bat b/start_webapp.bat new file mode 100644 index 0000000..51a21c3 --- /dev/null +++ b/start_webapp.bat @@ -0,0 +1,27 @@ +@echo off +:: Find Git Bash and launch start_webapp.sh +set "SCRIPT=%~dp0start_webapp.sh" + +:: Common Git Bash locations +set "BASH=" +if exist "C:\Program Files\Git\bin\bash.exe" set "BASH=C:\Program Files\Git\bin\bash.exe" +if exist "C:\Program Files (x86)\Git\bin\bash.exe" set "BASH=C:\Program Files (x86)\Git\bin\bash.exe" + +:: Fall back to bash on PATH (e.g. if Git is in PATH) +if "%BASH%"=="" ( + where bash >nul 2>&1 + if %errorlevel%==0 set "BASH=bash" +) + +if "%BASH%"=="" ( + echo. + echo ERROR: Git Bash not found. + echo Install Git for Windows from https://git-scm.com/download/win + echo and make sure "Git Bash" is included in the installation. + echo. + pause + exit /b 1 +) + +"%BASH%" "%SCRIPT%" +pause diff --git a/start_webapp.sh b/start_webapp.sh new file mode 100644 index 0000000..739d43c --- /dev/null +++ b/start_webapp.sh @@ -0,0 +1,34 @@ +#!/usr/bin/env bash +set -e +cd "$(dirname "$0")" + +PORT=8080 +NAME="${COMPUTERNAME:-$(hostname)}" + +# Resolve LAN IP using Python (same method the app uses internally) +LAN_IP=$(python -c " +import socket +try: + s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) + s.connect(('8.8.8.8', 80)) + print(s.getsockname()[0]) + s.close() +except Exception: + print('127.0.0.1') +" 2>/dev/null) + +echo "" +echo " ╔══════════════════════════════════════════╗" +echo " ║ MuSync Web App ║" +echo " ╠══════════════════════════════════════════╣" +echo " ║ Open on this PC : http://127.0.0.1:$PORT ║" +echo " ║ Open on phone : http://$LAN_IP:$PORT ║" +echo " ╚══════════════════════════════════════════╝" +echo "" +echo " On your phone: connect to the same Wi-Fi," +echo " then open the URL above in your browser." +echo "" +echo " Press Ctrl+C to stop." +echo "" + +python webapp.py --name "$NAME" --port "$PORT"