update electron android adb over browser

client-electron/src/App.tsx

@@ -6,26 +6,36 @@ import {
 } from 'react-router-dom'
 import AuthCallBack from './AuthCallBack'
 import MainLayout from './layouts/MainLayout'
-import Home from './pages/Home'
+import HomePage from './pages/Home'
+import LoginPage from './pages/Login'
+import AndroidPage from './pages/Android'
 
 function router() {
   const routes: RouteObject[] = [
     {
       path: '/',
-      element: (
-        <MainLayout>
-          <Home />
-        </MainLayout>
-      ),
+      element: <MainLayout />,
       children: [
+        {
+          path: '/',
+          element: <HomePage />
+        },
         {
           path: 'recipes',
           element: <div>Recipes</div>
+        },
+        {
+          path: 'android',
+          element: <AndroidPage />
         }
       ]
     },
     {
-      path: '/auth/callback',
+      path: '/login',
+      element: <LoginPage />
+    },
+    {
+      path: '/callback',
       element: <AuthCallBack />
     },
     {
@@ -38,8 +48,7 @@ function router() {
       )
     }
   ]
-
-  if (import.meta.env.MODE == 'electron') {
+  if (window.electronRuntime) {
     return createHashRouter(routes)
   }
   return createBrowserRouter(routes)

client-electron/src/AuthCallBack.tsx

@@ -3,16 +3,24 @@
 // then emit a message to the main process to close the window
 const AuthCallBack: React.FC = () => {
   const params = new URLSearchParams(window.location.search)
-
   // emit message to main process
+
   window.opener.postMessage(
     {
       payload: 'loginSuccess',
-      data: params
+      data: {
+        id: params.get('id'),
+        name: params.get('name'),
+        email: params.get('email'),
+        picture: params.get('picture'),
+        permissions: params.get('permissions')
+      }
     },
     '*'
   )
 
+  window.close()
+
   return <div>it just call back</div>
 }
 

client-electron/src/hooks/adb.ts

@@ -0,0 +1,19 @@
+import {
+  type AdbDaemonWebUsbDevice,
+  AdbDaemonWebUsbDeviceManager
+} from '@yume-chan/adb-daemon-webusb'
+import { create } from 'zustand'
+
+interface ADB {
+  manager: AdbDaemonWebUsbDeviceManager | undefined
+  device: AdbDaemonWebUsbDevice | undefined
+  setDevice: (device: AdbDaemonWebUsbDevice | undefined) => void
+}
+
+const useAdb = create<ADB>(set => ({
+  manager: AdbDaemonWebUsbDeviceManager.BROWSER,
+  device: undefined,
+  setDevice: device => set({ device })
+}))
+
+export default useAdb

client-electron/src/hooks/userAuth.ts

@@ -1,14 +1,40 @@
 import { create } from 'zustand'
+import customAxios from '../utils/customAxios'
 
-interface UserAuth {
-  username: string | undefined
-  email: string | undefined
+export interface UserInfo {
+  id: string
+  name: string
+  email: string
+  picture: string
+  permissions: string[]
 }
 
-const userAuthStore = create<UserAuth>(() => ({
-  username: undefined,
-  email: undefined
+interface UserAuth {
+  userInfo: UserInfo | null
+  setUserInfo: (userInfo: UserInfo | null) => void
+  getUserInfo: () => Promise<UserInfo | null>
+  logout: () => void
+}
+
+const userAuthStore = create<UserAuth>(set => ({
+  userInfo: null,
+  setUserInfo: userInfo => set({ userInfo }),
+  getUserInfo: () => {
+    return customAxios
+      .get<UserInfo>('/user/me')
+      .then(res => {
+        set({ userInfo: res.data })
+        return res.data
+      })
+      .catch(() => {
+        set({ userInfo: null })
+        return null
+      })
+  },
+  logout: () => {
+    customAxios.post('/auth/logout')
+    set({ userInfo: null })
+  }
 }))
 
-export const getUserName = userAuthStore(state => state.username)
-export const getUserEmail = userAuthStore(state => state.email)
+export default userAuthStore

client-electron/src/layouts/MainLayout.tsx

@@ -1,12 +1,41 @@
+import { Outlet, useNavigate } from 'react-router-dom'
 import Header from '../components/Header'
 import Sidebar from '../components/Sidebar'
+import userAuthStore from '../hooks/userAuth'
+import { useShallow } from 'zustand/react/shallow'
+import { useCallback } from 'react'
+
+const MainLayout = () => {
+  const { userInfo, getUserInfo } = userAuthStore(
+    useShallow(state => ({
+      userInfo: state.userInfo,
+      getUserInfo: state.getUserInfo
+    }))
+  )
+  const navigate = useNavigate()
+
+  // get current path
+  const currentPath = window.location.pathname
+
+  useCallback(() => {
+    console.log(import.meta.env.NODE_ENV)
+    if (!userInfo && import.meta.env.NODE_ENV !== 'development') {
+      getUserInfo().then(userInfo => {
+        // if still not login then redirect to login page
+        if (!userInfo) {
+          navigate('/login?redirect=' + currentPath)
+        }
+      })
+    }
+  }, [userInfo, getUserInfo, navigate, currentPath])
 
-const MainLayout = ({ children }: React.PropsWithChildren) => {
   return (
     <div>
       <Sidebar />
       <Header />
-      <main className="fixed pt-14 px-4 pl-[21rem]">{children}</main>
+      <main className="fixed pt-14 px-4 pl-[21rem]">
+        <Outlet />
+      </main>
     </div>
   )
 }

client-electron/src/main.tsx

@@ -9,9 +9,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   </React.StrictMode>
 )
 
-console.log(import.meta.env.MODE)
-
-if (import.meta.env.MODE === 'electron') {
+if (window.electronRuntime) {
   // Remove Preload scripts loading
   postMessage({ payload: 'removeLoading' }, '*')
 
@@ -20,6 +18,41 @@ if (import.meta.env.MODE === 'electron') {
     console.log(message)
   })
 
+  window.ipcRenderer
+    .invoke(
+      'keyChainSync',
+      import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_SERVICE_NAME
+    )
+    .then(result => {
+      console.log(result)
+    })
+
+  // getPassword(
+  //   import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_SERVICE_NAME,
+  //   import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_ACCOUNT_ACCESS_TOKEN
+  // ).then(tokenMaxAge => {
+  //   if (tokenMaxAge) {
+  //     const [token, max_age] = tokenMaxAge.split(';')
+  //     document.cookie =
+  //       'access_token=' +
+  //       token +
+  //       '; Path=/; HttpOnly; SameSite=None; Secure; Max-Age=' +
+  //       max_age
+  //   }
+  // })
+
+  // getPassword(
+  //   import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_SERVICE_NAME,
+  //   import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_ACCOUNT_REFRESH_TOKEN
+  // ).then(refreshToken => {
+  //   if (refreshToken) {
+  //     document.cookie =
+  //       'refresh_token=' +
+  //       refreshToken +
+  //       '; Path=/; HttpOnly; SameSite=None; Secure;'
+  //   }
+  // })
+
   // Use deep link
   window.ipcRenderer.on('deeplink', (_event, url) => {
     console.log(url)

client-electron/src/pages/Android.tsx

@@ -0,0 +1,178 @@
+import { useShallow } from 'zustand/react/shallow'
+import { ADB_DEFAULT_DEVICE_FILTER } from '@yume-chan/adb-daemon-webusb'
+import AdbWebCredentialStore from '@yume-chan/adb-credential-web'
+import { Adb, AdbDaemonTransport } from '@yume-chan/adb'
+import useAdb from '../hooks/adb'
+import type { AdbScrcpyVideoStream } from '@yume-chan/adb-scrcpy'
+import { AdbScrcpyClient, AdbScrcpyOptions2_1 } from '@yume-chan/adb-scrcpy'
+import { WebCodecsDecoder } from '@yume-chan/scrcpy-decoder-webcodecs'
+import {
+  ScrcpyLogLevel1_18,
+  ScrcpyOptions2_1,
+  ScrcpyVideoCodecId
+} from '@yume-chan/scrcpy'
+import { useState } from 'react'
+
+const ScreenStream: React.FC<{ child: HTMLCanvasElement }> = ({
+  child
+}: {
+  child: HTMLCanvasElement
+}) => {
+  return <div ref={ref => ref?.appendChild(child)}></div>
+}
+
+const AndroidPage: React.FC = () => {
+  const { manager, device, setDevice } = useAdb(
+    useShallow(state => ({
+      manager: state.manager,
+      device: state.device,
+      setDevice: state.setDevice
+    }))
+  )
+
+  const [decoder, setDecoder] = useState<WebCodecsDecoder | undefined>()
+  const [client, setClient] = useState<AdbScrcpyClient | undefined>()
+  const [adbClient, setAdbClient] = useState<Adb | undefined>(undefined)
+
+  function attachDevice() {
+    manager
+      ?.requestDevice({
+        filters: [
+          {
+            ...ADB_DEFAULT_DEVICE_FILTER,
+            vendorId: 1478
+          }
+        ]
+      })
+      .then(selectedDevice => {
+        if (!selectedDevice) {
+          return
+        } else {
+          setDevice(selectedDevice)
+        }
+      })
+  }
+
+  function disConnectDevice() {
+    device?.raw.forget()
+    setDevice(undefined)
+  }
+
+  //   function reboot() {
+  //     device?.connect().then(connection => {
+  //       const credentialStore: AdbWebCredentialStore = new AdbWebCredentialStore()
+
+  //       AdbDaemonTransport.authenticate({
+  //         serial: device?.serial,
+  //         connection,
+  //         credentialStore: credentialStore
+  //       }).then(transport => {
+  //         const adb: Adb = new Adb(transport)
+
+  //         adb.power.reboot().then(() => {
+  //           console.log('reboot success')
+  //         })
+  //       })
+  //     })
+  //   }
+
+  async function scrcpyConnect() {
+    // const url = new URL('../bin/scrcpy-server.bin', import.meta.url)
+    // const server: ArrayBuffer = await fetch(url).then(res => res.arrayBuffer())
+
+    const connection = await device?.connect()
+
+    const credentialStore: AdbWebCredentialStore = new AdbWebCredentialStore()
+
+    const transport = await AdbDaemonTransport.authenticate({
+      serial: device!.serial,
+      connection: connection!,
+      credentialStore: credentialStore
+    })
+
+    const adb: Adb = new Adb(transport)
+    setAdbClient(adb)
+    // await AdbScrcpyClient.pushServer(
+    //   adb,
+    //   new ReadableStream({
+    //     start(controller) {
+    //       controller.enqueue(new Consumable(new Uint8Array(server)))
+    //       controller.close()
+    //     }
+    //   })
+    // )
+
+    await adb.subprocess.spawn(
+      'CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server 2.1'
+    )
+
+    const scrcpyOption = new ScrcpyOptions2_1({
+      audio: false,
+      maxFps: 60,
+      control: false,
+      video: true,
+      logLevel: ScrcpyLogLevel1_18.Debug,
+      videoCodec: 'h264',
+      stayAwake: true,
+      cleanup: true
+    })
+    const _client = await AdbScrcpyClient.start(
+      adb,
+      '/data/local/tmp/scrcpy-server.jar',
+      '2.1',
+      new AdbScrcpyOptions2_1(scrcpyOption)
+    )
+
+    setClient(_client)
+  }
+
+  async function scrcpyStream() {
+    const videoStream: AdbScrcpyVideoStream | undefined =
+      await client?.videoStream
+    const _decoder = new WebCodecsDecoder(ScrcpyVideoCodecId.H264)
+    videoStream?.stream.pipeTo(_decoder.writable)
+    setDecoder(_decoder)
+  }
+
+  function scrcpyDisconnect() {
+    client?.close()
+    setClient(undefined)
+    setDecoder(undefined)
+  }
+
+  function rebootDevice() {
+    adbClient?.power.reboot()
+  }
+
+  return (
+    <div>
+      <h1>This is Android Page!!!!!!!</h1>
+      {device ? <h2>Device: {device.name}</h2> : <h2>No Device</h2>}
+      <div className="flex flex-row">
+        <button className="btn btn-primary" onClick={attachDevice}>
+          Attach Device
+        </button>
+        <button className="btn btn-primary" onClick={disConnectDevice}>
+          Disconnect Device
+        </button>
+        <button className="btn btn-primary" onClick={rebootDevice}>
+          Reboot Device
+        </button>
+      </div>
+      <div className="flex flex-row">
+        <button className="btn btn-primary" onClick={scrcpyConnect}>
+          Scrcpy Connect
+        </button>
+        <button className="btn btn-primary" onClick={scrcpyStream}>
+          Scrcpy Stream
+        </button>
+        <button className="btn btn-primary" onClick={scrcpyDisconnect}>
+          Scrcpy Disconnect
+        </button>
+      </div>
+      {decoder ? <ScreenStream child={decoder.renderer} /> : ''}
+    </div>
+  )
+}
+
+export default AndroidPage

client-electron/src/pages/Home.tsx

@@ -1,51 +1,15 @@
 import React from 'react'
-import googleLogo from '../assets/google-color.svg'
-
-const Home: React.FC = () => {
-  console.log(import.meta.env.TAOBIN_RECIPE_MANAGER_SERVER_URL)
-
-  const loginWithGoogle = () => {
-    // if is web mode then use window.open
-    // if is electron mode then use ipcRenderer.send to use deep link method
-    if (import.meta.env.MODE === 'web') {
-      // open new window and listen to message from window.opener
-      const newWindow = window.open(
-        import.meta.env.TAOBIN_RECIPE_MANAGER_SERVER_URL,
-        '_blank',
-        'width=500,height=600'
-      )
-
-      // listen to message from new window
-      window.addEventListener('message', event => {
-        if (event.data.payload === 'loginSuccess') {
-          // close new window
-          newWindow?.close()
-
-          console.log(event.data)
-        }
-      })
-    } else {
-      window.ipcRenderer.send('deeplink', 'http://127.0.0.1:5500/test.html')
-    }
-  }
+import { Link } from 'react-router-dom'
 
+const HomePage: React.FC = () => {
   return (
     <div>
       <h1>This is Home Page!!!!!!!</h1>
-      <button
-        onClick={loginWithGoogle}
-        className="bg-white px-4 py-2 border flex gap-2 border-slate-200 rounded-lg text-slate-700 hover:border-slate-400 hover:text-slate-900 hover:shadow transition duration-150"
-      >
-        <img
-          className="w-6 h-6"
-          src={googleLogo}
-          alt="google logo"
-          loading="eager"
-        />
-        <span>Login with @forth.co.th Google account</span>
+      <button className="btn btn-primary">
+        <Link to="/android">Go to Android Page</Link>
       </button>
     </div>
   )
 }
 
-export default Home
+export default HomePage

client-electron/src/pages/Login.tsx

@@ -0,0 +1,85 @@
+import { useNavigate } from 'react-router-dom'
+import googleLogo from '../assets/google-color.svg'
+import userAuthStore, { type UserInfo } from '../hooks/userAuth'
+
+const LoginPage: React.FC = () => {
+  const setUserInfo = userAuthStore(state => state.setUserInfo)
+  const navigate = useNavigate()
+
+  const redirectUrl =
+    new URLSearchParams(window.location.search).get('redirect') ?? '/'
+
+  const loginWithGoogle = () => {
+    // if is web mode then use window.open
+    // if is electron mode then use ipcRenderer.send to use deep link method
+    if (window.electronRuntime) {
+      window.ipcRenderer.send(
+        'deeplink',
+        import.meta.env.TAOBIN_RECIPE_MANAGER_SERVER_URL +
+          '/auth/google?redirect_to=' +
+          redirectUrl +
+          '&kind=electron'
+      )
+
+      window.ipcRenderer.on('loginSuccess', (_event, data) => {
+        console.log(data)
+
+        setUserInfo(data satisfies UserInfo)
+        navigate(redirectUrl)
+      })
+    } else {
+      // open new window and listen to message from window.opener
+      window.open(
+        import.meta.env.TAOBIN_RECIPE_MANAGER_SERVER_URL +
+          '/auth/google?redirect_to=' +
+          redirectUrl,
+        '_blank',
+        'width=500,height=600'
+      )
+
+      // listen to message from new window
+      window.addEventListener('message', event => {
+        if (event.data.payload === 'loginSuccess') {
+          //   const { access_token, max_age, refresh_token } = event.data.data
+
+          //   setPassword(
+          //     import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_SERVICE_NAME,
+          //     import.meta.env
+          //       .TAOBIN_RECIPE_MANAGER_KEY_CHAIN_ACCOUNT_ACCESS_TOKEN,
+          //     access_token + ';' + max_age
+          //   )
+
+          //   setPassword(
+          //     import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_SERVICE_NAME,
+          //     import.meta.env
+          //       .TAOBIN_RECIPE_MANAGER_KEY_CHAIN_ACCOUNT_REFRESH_TOKEN,
+          //     refresh_token
+          //   )
+
+          setUserInfo(event.data.data satisfies UserInfo)
+
+          navigate(redirectUrl)
+        }
+      })
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen">
+      <button
+        onClick={loginWithGoogle}
+        className="bg-white px-4 py-2 border flex gap-2 border-slate-200 rounded-lg text-slate-700 hover:border-slate-400 hover:text-slate-900 hover:shadow transition duration-150"
+      >
+        <img
+          className="w-6 h-6"
+          src={googleLogo}
+          alt="google logo"
+          loading="eager"
+        />
+        <span>Login with @forth.co.th Google account</span>
+      </button>
+    </div>
+  )
+}
+
+export default LoginPage

client-electron/src/services/usb.service.ts

@@ -0,0 +1,14 @@
+import { AdbDaemonWebUsbDeviceManager } from '@yume-chan/adb-daemon-webusb'
+
+const Manager: AdbDaemonWebUsbDeviceManager | undefined =
+  AdbDaemonWebUsbDeviceManager.BROWSER
+
+export async function getDevices() {
+  if (!Manager) {
+    alert('WebUSB is not supported in this browser')
+    return
+  }
+
+  const devices = await Manager.getDevices()
+  return devices
+}

client-electron/src/utils/customAxios.ts

@@ -0,0 +1,26 @@
+import axios from 'axios'
+
+const customAxios = axios.create({
+  baseURL: import.meta.env.TAOBIN_RECIPE_MANAGER_SERVER_URL,
+  withCredentials: true
+})
+
+customAxios.interceptors.response.use(
+  res => res,
+  err => {
+    const originalRequest = err.config
+
+    if (err.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true
+      return customAxios.get('/auth/refresh').then(res => {
+        if (res.status === 200) {
+          return customAxios(originalRequest)
+        }
+      })
+    }
+
+    return Promise.reject(err)
+  }
+)
+
+export default customAxios

client-electron/src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  TAOBIN_RECIPE_MANAGER_SERVER_URL: string
+  TAOBIN_RECIPE_MANAGER_KEY_CHAIN_SERVICE_NAME: string
+  TAOBIN_RECIPE_MANAGER_KEY_CHAIN_ACCOUNT_ACCESS_TOKEN: string
+  TAOBIN_RECIPE_MANAGER_KEY_CHAIN_ACCOUNT_REFRESH_TOKEN: string
+  MAIN_VITE_TEST: boolean
+}