Merge 57fbee1490 into ff3727b1fe

* feat(ui): improve video playback and keyboard handling in WebRTCVideo

* fix(ui): correct event handler naming in WebRTCVideo component

.github/workflows/push.yaml

@@ -0,0 +1,126 @@
+name: Push
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  id-token: write
+  contents: read
+  pull-requests: write
+
+jobs:
+  build:
+    name: Build
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-22.04]
+        go: [1.21, 1.23.4]
+        node: [21]
+        goos: [linux]
+        goarch: [arm]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install Dependencies
+        working-directory: ui
+        run: npm ci
+
+      - name: Build UI
+        working-directory: ui
+        run: npm run build:device
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: ${{ matrix.go }}
+
+      - name: Install Go Dependencies
+        run: |
+          go mod download
+
+      - name: Build Binaries
+        env:
+          GOOS: ${{ matrix.goos }}
+          GOARCH: ${{ matrix.goarch }}
+        run: |
+          GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="-s -w -X kvm.builtAppVersion=dev-${GIT_COMMIT:0:7}" -o bin/jetkvm_app cmd/main.go
+          chmod 755 bin/jetkvm_app
+
+      - name: Upload Debug Artifact
+        uses: actions/upload-artifact@v4
+        if: ${{ (github.ref == 'refs/heads/main' || github.event_name == 'pull_request') && matrix.go == '1.21' }}
+        with:
+          name: jetkvm_app_debug
+          path: bin/jetkvm_app
+
+  comment:
+    name: Comment
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Generate Links
+        id: linksa
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          ARTIFACT_ID=$(gh api repos/${{ github.repository }}/actions/runs/${{ github.run_id }}/artifacts --jq '.artifacts[0].id')
+          echo "ARTIFACT_URL=https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}/artifacts/$ARTIFACT_ID" >> $GITHUB_ENV
+          echo "LATEST_COMMIT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+
+      - name: Comment on PR
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if [[ "${{ github.event_name }}" == "pull_request" ]]; then
+            TITLE="${{ github.event.pull_request.title }}"
+            PR_NUMBER=${{ github.event.pull_request.number }}
+          else
+            TITLE="main branch"
+          fi
+
+          COMMENT=$(cat << EOF
+          ✅ **Build successfully for $TITLE!**
+
+          | Name             | Link                                                                 |
+          |------------------|----------------------------------------------------------------------|
+          | 🔗 Debug Binary  | [Download](${{ env.ARTIFACT_URL }})                                   |
+          | 🔗 Latest commit | [${{ env.LATEST_COMMIT }}](https://github.com/${{ github.repository }}/commit/${{ github.sha }}) |
+          EOF
+          )
+
+          # Post Comment
+          if [[ "${{ github.event_name }}" == "pull_request" ]]; then
+            # Look for an existing comment
+            COMMENT_ID=$(gh api repos/${{ github.repository }}/issues/$PR_NUMBER/comments \
+              --jq '.[] | select(.body | contains("✅ **Build successfully for")) | .id')
+
+            if [ -z "$COMMENT_ID" ]; then
+              # Create a new comment if none exists
+              gh pr comment $PR_NUMBER --body "$COMMENT"
+            else
+              # Update the existing comment
+              gh api repos/${{ github.repository }}/issues/comments/$COMMENT_ID \
+                --method PATCH \
+                -f body="$COMMENT"
+            fi
+          else
+            # Log the comment for main branch
+            echo "$COMMENT"
+          fi

.github/workflows/release.yaml

@@ -0,0 +1,91 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-22.04
+    permissions:
+      contents: write
+      packages: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21
+
+      - name: Install Dependencies
+        working-directory: ui
+        run: npm ci
+
+      - name: Build UI
+        working-directory: ui
+        run: npm run build:device
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: 1.21
+
+      - name: Build Release Binaries
+        env:
+          REF: ${{ github.ref }}
+        run: |
+          GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="-s -w -X kvm.builtAppVersion=${REF:11}" -o bin/jetkvm_app cmd/main.go
+          chmod 755 bin/jetkvm_app
+
+      - name: Create checksum
+        env:
+          REF: ${{ github.ref }}
+        run: |
+          SUM=$(shasum -a 256 bin/jetkvm_app | cut -d ' ' -f 1)
+          echo -e "\n#### SHA256 Checksum\n\`\`\`\n$SUM  bin/jetkvm_app\n\`\`\`\n" >> ./RELEASE_CHANGELOG
+          echo -e "$SUM bin/jetkvm_app\n" > checksums.txt
+
+      - name: Create Release Branch
+        env:
+          REF: ${{ github.ref }}
+        run: |
+          BRANCH=release/${REF:10}
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git checkout -b ${BRANCH}
+          git push -u origin ${BRANCH}
+
+      - name: Create Release
+        id: create_release
+        uses: softprops/action-gh-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          draft: true
+          prerelease: ${{ contains(github.ref, 'rc') || contains(github.ref, 'beta') || contains(github.ref, 'alpha') }}
+          body_path: ./RELEASE_CHANGELOG
+
+      - name: Upload JetKVM binary
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: bin/jetkvm_app
+          asset_name: jetkvm_app
+          asset_content_type: application/octet-stream
+
+      - name: Upload checksum
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./checksums.txt
+          asset_name: checksums.txt
+          asset_content_type: text/plain

Makefile

@@ -1,5 +1,5 @@
-VERSION_DEV := 0.3.5-dev$(shell date +%Y%m%d%H%M)
+VERSION_DEV := 0.3.8-dev$(shell date +%Y%m%d%H%M)
-VERSION := 0.3.4
+VERSION := 0.3.7
 
 hash_resource:
 	@shasum -a 256 resource/jetkvm_native | cut -d ' ' -f 1 > resource/jetkvm_native.sha256

config.go

@@ -55,6 +55,9 @@ func LoadConfig() {
 		return
 	}
 
+	// load the default config
+	config = defaultConfig
+
 	file, err := os.Open(configPath)
 	if err != nil {
 		logger.Debug("default config file doesn't exist, using default")

ui/src/components/WebRTCVideo.tsx

@@ -285,11 +285,6 @@ export default function WebRTCVideo() {
       e.preventDefault();
       const prev = useHidStore.getState();
 
-      // if (document.activeElement?.id !== "videoFocusTrap") {
-      //   console.log("KEYUP: Not focusing on the video", document.activeElement);
-      //   return;
-      // }
-
       setIsNumLockActive(e.getModifierState("NumLock"));
       setIsCapsLockActive(e.getModifierState("CapsLock"));
       setIsScrollLockActive(e.getModifierState("ScrollLock"));
@@ -336,6 +331,18 @@ export default function WebRTCVideo() {
     [keyDownHandler, keyUpHandler, resetKeyboardState, sendKeyboardEvent],
   );
 
+  const videoKeyUpHandler = useCallback((e: KeyboardEvent) => {
+    // In fullscreen mode in chrome & safari, the space key is used to pause/play the video
+    // there is no way to prevent this, so we need to simply force play the video when it's paused.
+    // Fix only works in chrome based browsers.
+    if (e.code === "Space") {
+      if (videoElm.current?.paused == true) {
+        console.log("Force playing video");
+        videoElm.current?.play();
+      }
+    }
+  }, []);
+
   useEffect(
     function setupVideoEventListeners() {
       let videoElmRefValue = null;
@@ -347,7 +354,7 @@ export default function WebRTCVideo() {
       videoElmRefValue.addEventListener("mousemove", mouseMoveHandler, { signal });
       videoElmRefValue.addEventListener("pointerdown", mouseMoveHandler, { signal });
       videoElmRefValue.addEventListener("pointerup", mouseMoveHandler, { signal });
-
+      videoElmRefValue.addEventListener("keyup", videoKeyUpHandler, { signal });
       videoElmRefValue.addEventListener("wheel", mouseWheelHandler, { signal });
       videoElmRefValue.addEventListener(
         "contextmenu",
@@ -364,7 +371,13 @@ export default function WebRTCVideo() {
         if (videoElmRefValue) abortController.abort();
       };
     },
-    [mouseMoveHandler, resetMousePosition, onVideoPlaying, mouseWheelHandler],
+    [
+      mouseMoveHandler,
+      resetMousePosition,
+      onVideoPlaying,
+      mouseWheelHandler,
+      videoKeyUpHandler,
+    ],
   );
 
   useEffect(
@@ -410,7 +423,7 @@ export default function WebRTCVideo() {
   }, [sendKeyboardEvent, setDisableVideoFocusTrap, sidebarView]);
 
   return (
-    <div className="grid w-full h-full grid-rows-layout">
+    <div className="grid h-full w-full grid-rows-layout">
       <div className="min-h-[39.5px]">
         <fieldset disabled={peerConnectionState !== "connected"}>
           <Actionbar
@@ -427,18 +440,18 @@ export default function WebRTCVideo() {
         <div className="relative h-full">
           <div
             className={cx(
-              "absolute inset-0 bg-blue-50/40 dark:bg-slate-800/40 opacity-80",
+              "absolute inset-0 bg-blue-50/40 opacity-80 dark:bg-slate-800/40",
               "[background-image:radial-gradient(theme(colors.blue.300)_0.5px,transparent_0.5px),radial-gradient(theme(colors.blue.300)_0.5px,transparent_0.5px)] dark:[background-image:radial-gradient(theme(colors.slate.700)_0.5px,transparent_0.5px),radial-gradient(theme(colors.slate.700)_0.5px,transparent_0.5px)]",
               "[background-position:0_0,10px_10px]",
               "[background-size:20px_20px]",
             )}
           />
-          <div className="flex flex-col h-full">
+          <div className="flex h-full flex-col">
             <div className="relative flex-grow overflow-hidden">
-              <div className="flex flex-col h-full">
+              <div className="flex h-full flex-col">
-                <div className="grid flex-grow overflow-hidden grid-rows-bodyFooter">
+                <div className="grid flex-grow grid-rows-bodyFooter overflow-hidden">
-                  <div className="relative flex items-center justify-center mx-4 my-2 overflow-hidden">
+                  <div className="relative mx-4 my-2 flex items-center justify-center overflow-hidden">
-                    <div className="relative flex items-center justify-center w-full h-full">
+                    <div className="relative flex h-full w-full items-center justify-center">
                       <video
                         ref={videoElm}
                         autoPlay={true}
@@ -454,14 +467,14 @@ export default function WebRTCVideo() {
                           {
                             "cursor-none": settings.isCursorHidden,
                             "opacity-0": isLoading || isConnectionError || hdmiError,
-                            "animate-slideUpFade border border-slate-800/30 dark:border-slate-300/20 opacity-0 shadow":
+                            "animate-slideUpFade border border-slate-800/30 opacity-0 shadow dark:border-slate-300/20":
                               isPlaying,
                           },
                         )}
                       />
                       <div
                         style={{ animationDuration: "500ms" }}
-                        className="absolute inset-0 flex items-center justify-center opacity-0 pointer-events-none animate-slideUpFade"
+                        className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center opacity-0"
                       >
                         <div className="relative h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
                           <LoadingOverlay show={isLoading} />

ui/src/components/sidebar/settings.tsx

@@ -239,6 +239,7 @@ export default function SettingsSidebar() {
     }
 
     setBacklightSettings(settings);
+    handleBacklightSettingsSave();
   }
 
   const handleBacklightSettingsSave = () => {
@@ -362,7 +363,7 @@ export default function SettingsSidebar() {
       if ("error" in resp) return;
       setUsbEmulationEnabled(resp.result as boolean);
     });
-  }, [getCloudState, send, setDeveloperMode, setHideCursor, setJiggler]);
+  }, [getCloudState, send, setBacklightSettings, setDeveloperMode, setHideCursor, setJiggler]);
 
   const getDevice = useCallback(async () => {
     try {
@@ -900,12 +901,6 @@ export default function SettingsSidebar() {
         <p className="text-xs text-slate-600 dark:text-slate-400">
           The display will wake up when the connection state changes, or when touched.
         </p>
-        <Button
-          size="SM"
-          theme="primary"
-          text="Save Display Settings"
-          onClick={handleBacklightSettingsSave}
-        />
         <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
         <div className="pb-2 space-y-4">
           <SectionHeader