luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement mobile-first navigation with tabs, server-side auto-connect, improve mobile UX (#1008)

Browse Source 
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>
This commit is contained in:
Copilot
2025-12-27 17:02:49 +01:00
committed by GitHub
parent 8f86d272c7
commit 4de52aba7c
45 changed files with 1381 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
scripts/uiTestsMobile.sh
View File

@@ -30,12 +30,17 @@ function finish {
trap finish EXIT
set -e
# Mobile viewport dimensions (Pixel 6)
DIMENSIONS="412x915"
# Mobile viewport dimensions (Pixel 6 - height must be even for h264)
DIMENSIONS="412x914"
# Chrome header in --app mode is 88px tall
# Add 88px to Xvfb height to accommodate the Chrome header
CHROME_HEADER_HEIGHT=88
XVFB_HEIGHT=$((914 + CHROME_HEADER_HEIGHT))
XVFB_DIMENSIONS="412x${XVFB_HEIGHT}"
SCR=99
# Start new window manager
Xvfb :$SCR -screen 0 "$DIMENSIONS"x24 -ac &
# Start new window manager with extra height for Chrome header
Xvfb :$SCR -screen 0 "$XVFB_DIMENSIONS"x24 -ac &
export PID_XVFB=$!
sleep 2
@@ -47,6 +52,7 @@ export PID_VNC=$!
mosquitto &
export PID_MOSQUITTO=$!
sleep 2
npx -y playwright install
# Start MQTT Explorer in browser mode
export MQTT_EXPLORER_USERNAME=admin
@@ -61,8 +67,9 @@ sleep 5
rm -f ./app-mobile*.mp4
rm -f ./qrawvideorgb24-mobile.yuv
# Start recording in tmux
tmux new-session -d -s record-mobile ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -r 20 -vcodec rawvideo -pix_fmt yuv420p qrawvideorgb24-mobile.yuv
# Start recording in tmux with vertical offset to exclude Chrome header
# Record only the actual mobile viewport (412x914), skipping the 88px Chrome header at top
tmux new-session -d -s record-mobile ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR+0,$CHROME_HEADER_HEIGHT -r 20 -vcodec rawvideo -pix_fmt yuv420p qrawvideorgb24-mobile.yuv
# Start tests
export BROWSER_MODE_URL=http://localhost:3000