Feature/device ss

package.json

@@ -8,6 +8,7 @@
     "dist:prod": "webpack --config webpack/ws-scrcpy.prod.ts --stats-error-details",
     "dist": "npm run dist:prod",
     "start": "npm run dist && cd dist && npm start",
+    "dev": "npm run dist:dev && cd dist && npm start",
     "script:dist:start": "node ./index.js",
     "lint": "eslint src/ --ext .ts",
     "format": "eslint src/ --fix --ext .ts",
@@ -18,6 +19,7 @@
   "dependencies": {
     "@dead50f7/adbkit": "^2.11.4",
     "express": "^4.21.2",
+    "express-basic-auth": "^1.2.1",
     "ios-device-lib": "^0.9.2",
     "node-mjpeg-proxy": "^0.3.2",
     "node-pty": "^0.10.1",

src/app/DisplayInfo.ts

@@ -16,7 +16,15 @@ export class DisplayInfo {
         public readonly rotation: number,
         public readonly layerStack: number,
         public readonly flags: number,
-    ) {}
+    ) {
+        const deviceViewElem = document.getElementsByClassName('device-view')[0] as HTMLElement;
+        if( rotation && deviceViewElem ){
+            deviceViewElem.style.maxWidth = "none";            
+        }
+        else if( deviceViewElem ){
+            deviceViewElem.style.maxWidth = "460px";
+        }
+    }
 
     public toBuffer(): Buffer {
         const temp = Buffer.alloc(DisplayInfo.BUFFER_LENGTH);

src/app/client/BaseDeviceTracker.ts

@@ -105,13 +105,19 @@ export abstract class BaseDeviceTracker<DD extends BaseDeviceDescriptor, TE exte
 
     protected buildDeviceTable(): void {
         const data = this.descriptors;
+        // console.log(TAG, 'Building table for', data);
         const devices = this.getOrCreateTableHolder();
         const tbody = this.getOrBuildTableBody(devices);
 
         const block = this.getOrCreateTrackerBlock(tbody, this.trackerName);
+         // Refresh the page
+        // console.log('Refreshing the page');
+        // window.location.reload();
         data.forEach((item) => {
+            // console.log(TAG, 'Building row (after initiating refresh)', item);
             this.buildDeviceRow(block, item);
         });
+
     }
 
     private setNameValue(parent: Element | null, name: string): void {

src/app/client/StreamReceiver.ts

@@ -25,6 +25,7 @@ export type DisplayCombinedInfo = {
 interface StreamReceiverEvents {
     video: ArrayBuffer;
     deviceMessage: DeviceMessage;
+    rotated: any;
     displayInfo: DisplayCombinedInfo[];
     clientsStats: ClientsStats;
     encoders: string[];
@@ -67,6 +68,7 @@ export class StreamReceiver<P extends ParamsStream> extends ManagerClient<Params
         for (let i = 0; i < displaysCount; i++) {
             const displayInfoBuffer = rest.slice(0, DisplayInfo.BUFFER_LENGTH);
             const displayInfo = DisplayInfo.fromBuffer(displayInfoBuffer);
+            this.emit("rotated", displayInfo.rotation);
             const { displayId } = displayInfo;
             this.displayInfoMap.set(displayId, displayInfo);
             rest = rest.slice(DisplayInfo.BUFFER_LENGTH);

src/app/googDevice/client/DeviceTracker.ts

@@ -171,11 +171,13 @@ export class DeviceTracker extends BaseDeviceTracker<GoogDeviceDescriptor, never
     }
 
     protected buildDeviceRow(tbody: Element, device: GoogDeviceDescriptor): void {
+        // console.log('buildDeviceRow:', device);
         let selectedInterfaceUrl = '';
         let selectedInterfaceName = '';
         const blockClass = 'desc-block';
         const fullName = `${this.id}_${Util.escapeUdid(device.udid)}`;
         const isActive = device.state === DeviceState.DEVICE;
+        // console.log('isActive:', isActive);
         let hasPid = false;
         const servicesId = `device_services_${fullName}`;
         const row = html`<div class="device ${isActive ? 'active' : 'not-active'}">

src/app/googDevice/client/StreamClientScrcpy.ts

@@ -30,6 +30,7 @@ import { ACTION } from '../../../common/Action';
 import { StreamReceiverScrcpy } from './StreamReceiverScrcpy';
 import { ParamsDeviceTracker } from '../../../types/ParamsDeviceTracker';
 import { ScrcpyFilePushStream } from '../filePush/ScrcpyFilePushStream';
+import genericAndroid from "../../../common/generic_android.png"
 
 type StartParams = {
     udid: string;
@@ -320,6 +321,11 @@ export class StreamClientScrcpy
         deviceView.appendChild(this.controlButtons);
         const video = document.createElement('div');
         video.className = 'video';
+        const genericAndroidMockup = document.createElement("img");
+        genericAndroidMockup.src = genericAndroid;
+        genericAndroidMockup.id = "generic-android-mockup";
+        genericAndroidMockup.style.height = "";
+        video.appendChild(genericAndroidMockup);
         deviceView.appendChild(video);
         deviceView.appendChild(moreBox);
         player.setParent(video);
@@ -340,6 +346,7 @@ export class StreamClientScrcpy
 
         const streamReceiver = this.streamReceiver;
         streamReceiver.on('deviceMessage', this.OnDeviceMessage);
+        streamReceiver.on('rotated', ()=>{ this.player?.reOrientScreen(true, this.player) });
         streamReceiver.on('video', this.onVideo);
         streamReceiver.on('clientsStats', this.onClientsStats);
         streamReceiver.on('displayInfo', this.onDisplayInfo);

src/app/googDevice/toolbox/GoogToolBox.ts

@@ -101,7 +101,7 @@ export class GoogToolBox extends ToolBox {
                 const element = el.getElement();
                 moreBox.style.display = element.checked ? 'block' : 'none';
             });
-            elements.unshift(more);
+            // elements.unshift(more);
         }
         return new GoogToolBox(elements);
     }

src/app/index.ts

@@ -3,9 +3,24 @@ import { StreamClientScrcpy } from './googDevice/client/StreamClientScrcpy';
 import { HostTracker } from './client/HostTracker';
 import { Tool } from './client/Tool';
 
+
 window.onload = async function (): Promise<void> {
+    // Redirect if the URL contains a hash fragment
     const hash = location.hash.replace(/^#!/, '');
-    const parsedQuery = new URLSearchParams(hash);
+    if (hash) {
+
+        const parsedQuery = new URLSearchParams(hash);
+
+        // Add `hasHash=true` to the query parameters
+        parsedQuery.set('hasHash', 'true');
+
+        // Redirect to a query-based URL
+        window.location.href = `/?${parsedQuery.toString()}`;
+        return; // Stop further execution
+    }
+
+    // If no hash fragment, proceed with the rest of the logic
+    const parsedQuery = new URLSearchParams(location.search); // Use query parameters instead of hash
     const action = parsedQuery.get('action');
 
     /// #if USE_BROADWAY