Web UI migration to Vite and Vue3 and improvements to the UX (#1673)

Co-authored-by: ReenigneArcher <[email protected]>
LizardByte · Dec 28, 2023 · 5bdbda9 · 5bdbda9
1 parent 6b7b599
commit 5bdbda9
Show file tree

Hide file tree

Showing 57 changed files with 1,831 additions and 2,140 deletions.
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
@@ -398,8 +398,6 @@ jobs:
           mkdir -p build
           mkdir -p artifacts
 
-          npm install
-
           cd build
           cmake -DCMAKE_BUILD_TYPE=Release \
             -DCMAKE_INSTALL_PREFIX=/usr \
@@ -527,8 +525,6 @@ jobs:
           BUILD_VERSION: ${{ needs.check_changelog.outputs.next_version_bare }}
           COMMIT: ${{ github.event.pull_request.head.sha || github.sha }}
         run: |
-          npm install
-
           mkdir build
           cd build
           cmake -DCMAKE_BUILD_TYPE=Release \
@@ -719,19 +715,16 @@ jobs:
             mingw-w64-x86_64-boost
             mingw-w64-x86_64-cmake
             mingw-w64-x86_64-curl
-            mingw-w64-x86_64-onevpl
+            mingw-w64-x86_64-nodejs
             mingw-w64-x86_64-nsis
+            mingw-w64-x86_64-onevpl
             mingw-w64-x86_64-openssl
             mingw-w64-x86_64-opus
             mingw-w64-x86_64-toolchain
             nasm
             wget
             yasm
 
-      - name: Install npm packages
-        run: |
-          npm install
-
       - name: Build Windows
         shell: msys2 {0}
         env:

diff --git a/cmake/dependencies/common.cmake b/cmake/dependencies/common.cmake
@@ -84,3 +84,4 @@ elseif(UNIX)
         include(${CMAKE_MODULE_PATH}/dependencies/linux.cmake)
     endif()
 endif()
+
diff --git a/cmake/packaging/common.cmake b/cmake/packaging/common.cmake
@@ -12,9 +12,14 @@ set(CPACK_PACKAGE_ICON ${PROJECT_SOURCE_DIR}/sunshine.png)
 set(CPACK_PACKAGE_FILE_NAME "${CMAKE_PROJECT_NAME}")
 set(CPACK_STRIP_FILES YES)
 
-# install npm modules
-install(DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}/node_modules"
-        DESTINATION "${SUNSHINE_ASSETS_DIR}/web")
+#install common assets
+install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
+        DESTINATION "${SUNSHINE_ASSETS_DIR}"
+        PATTERN "web" EXCLUDE)
+
+# install built vite assets
+install(DIRECTORY "${CMAKE_CURRENT_BINARY_DIR}/assets/web"
+        DESTINATION "${SUNSHINE_ASSETS_DIR}")
 
 # platform specific packaging
 if(WIN32)

diff --git a/cmake/packaging/linux.cmake b/cmake/packaging/linux.cmake
@@ -70,11 +70,11 @@ if(${SUNSHINE_TRAY} STREQUAL 1)
     install(FILES "${CMAKE_SOURCE_DIR}/sunshine.svg"
             DESTINATION "${CMAKE_INSTALL_PREFIX}/share/icons/hicolor/scalable/status"
             RENAME "sunshine-tray.svg")
-    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/images/sunshine-playing.svg"
+    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/public/images/sunshine-playing.svg"
             DESTINATION "${CMAKE_INSTALL_PREFIX}/share/icons/hicolor/scalable/status")
-    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/images/sunshine-pausing.svg"
+    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/public/images/sunshine-pausing.svg"
             DESTINATION "${CMAKE_INSTALL_PREFIX}/share/icons/hicolor/scalable/status")
-    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/images/sunshine-locked.svg"
+    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/public/images/sunshine-locked.svg"
             DESTINATION "${CMAKE_INSTALL_PREFIX}/share/icons/hicolor/scalable/status")
 
     set(CPACK_DEBIAN_PACKAGE_DEPENDS "\

diff --git a/cmake/packaging/macos.cmake b/cmake/packaging/macos.cmake
@@ -10,8 +10,6 @@ if(SUNSHINE_PACKAGE_MACOS)  # todo
     set(MAC_PREFIX "${CMAKE_PROJECT_NAME}.app/Contents")
     set(INSTALL_RUNTIME_DIR "${MAC_PREFIX}/MacOS")
 
-    install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
-            DESTINATION "${SUNSHINE_ASSETS_DIR}")
     install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/macos/assets/"
             DESTINATION "${SUNSHINE_ASSETS_DIR}")
 

diff --git a/cmake/packaging/unix.cmake b/cmake/packaging/unix.cmake
@@ -13,6 +13,3 @@ if(NOT CMAKE_INSTALL_PREFIX)
 endif()
 
 install(TARGETS sunshine RUNTIME DESTINATION "${CMAKE_INSTALL_BINDIR}")
-
-install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
-        DESTINATION "${SUNSHINE_ASSETS_DIR}")
diff --git a/cmake/packaging/windows.cmake b/cmake/packaging/windows.cmake
@@ -36,9 +36,6 @@ install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/windows/misc/gamepad/"
         COMPONENT gamepad)
 
 # Sunshine assets
-install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
-        DESTINATION "${SUNSHINE_ASSETS_DIR}"
-        COMPONENT assets)
 install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/windows/assets/"
         DESTINATION "${SUNSHINE_ASSETS_DIR}"
         COMPONENT assets)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
@@ -33,3 +33,9 @@ foreach(flag IN LISTS SUNSHINE_COMPILE_OPTIONS)
 endforeach()
 
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
+
+#WebUI build
+add_custom_target(web-ui ALL
+        WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        COMMENT "Installing NPM Dependencies and Building the Web UI"
+        COMMAND bash -c \"npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build\") # cmake-lint: disable=C0301
diff --git a/docker/debian-bookworm.dockerfile b/docker/debian-bookworm.dockerfile
@@ -95,9 +95,6 @@ _INSTALL_CUDA
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 

diff --git a/docker/debian-bullseye.dockerfile b/docker/debian-bullseye.dockerfile
@@ -31,6 +31,7 @@ set -e
 apt-get update -y
 apt-get install -y --no-install-recommends \
   build-essential \
+  ca-certificates \
   cmake=3.18.* \
   git \
   libavdevice-dev \
@@ -58,8 +59,6 @@ apt-get install -y --no-install-recommends \
   libxfixes-dev \
   libxrandr-dev \
   libxtst-dev \
-  nodejs \
-  npm \
   wget
 if [[ "${TARGETPLATFORM}" == 'linux/amd64' ]]; then
   apt-get install -y --no-install-recommends \
@@ -69,6 +68,17 @@ apt-get clean
 rm -rf /var/lib/apt/lists/*
 _DEPS
 
+#Install Node
+# hadolint ignore=SC1091
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
+source "$HOME/.nvm/nvm.sh"
+nvm install 20.9.0
+nvm use 20.9.0
+_INSTALL_NODE
+
 # install cuda
 WORKDIR /build/cuda
 # versions: https://developer.nvidia.com/cuda-toolkit-archive
@@ -95,16 +105,17 @@ _INSTALL_CUDA
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 
 # cmake and cpack
+# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e
+#Set Node version
+source "$HOME/.nvm/nvm.sh"
+nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
   -DCMAKE_BUILD_TYPE=Release \

diff --git a/docker/fedora-38.dockerfile b/docker/fedora-38.dockerfile
@@ -52,7 +52,7 @@ dnf -y install \
   libXrandr-devel \
   libXtst-devel \
   mesa-libGL-devel \
-  nodejs-npm \
+  nodejs \
   numactl-devel \
   openssl-devel \
   opus-devel \
@@ -94,9 +94,6 @@ _DEPS
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 

diff --git a/docker/fedora-39.dockerfile b/docker/fedora-39.dockerfile
@@ -52,7 +52,7 @@ dnf -y install \
   libXrandr-devel \
   libXtst-devel \
   mesa-libGL-devel \
-  nodejs-npm \
+  nodejs \
   numactl-devel \
   openssl-devel \
   opus-devel \
@@ -94,9 +94,6 @@ _DEPS
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 

diff --git a/docker/ubuntu-20.04.dockerfile b/docker/ubuntu-20.04.dockerfile
@@ -31,6 +31,7 @@ set -e
 apt-get update -y
 apt-get install -y --no-install-recommends \
   build-essential \
+  ca-certificates \
   gcc-10=10.5.* \
   g++-10=10.5.* \
   git \
@@ -59,8 +60,6 @@ apt-get install -y --no-install-recommends \
   libxfixes-dev \
   libxrandr-dev \
   libxtst-dev \
-  nodejs \
-  npm \
   wget
 if [[ "${TARGETPLATFORM}" == 'linux/amd64' ]]; then
   apt-get install -y --no-install-recommends \
@@ -70,6 +69,17 @@ apt-get clean
 rm -rf /var/lib/apt/lists/*
 _DEPS
 
+#Install Node
+# hadolint ignore=SC1091
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
+source "$HOME/.nvm/nvm.sh"
+nvm install 20.9.0
+nvm use 20.9.0
+_INSTALL_NODE
+
 # Update gcc alias
 # https://stackoverflow.com/a/70653945/11214013
 RUN <<_GCC_ALIAS
@@ -131,16 +141,17 @@ _INSTALL_CUDA
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 
 # cmake and cpack
+# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e
+#Set Node version
+source "$HOME/.nvm/nvm.sh"
+nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
   -DCMAKE_BUILD_TYPE=Release \

diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
@@ -32,6 +32,7 @@ apt-get update -y
 apt-get install -y --no-install-recommends \
   build-essential \
   cmake=3.22.* \
+  ca-certificates \
   git \
   libayatana-appindicator3-dev \
   libavdevice-dev \
@@ -58,8 +59,6 @@ apt-get install -y --no-install-recommends \
   libxfixes-dev \
   libxrandr-dev \
   libxtst-dev \
-  nodejs \
-  npm \
   wget
 if [[ "${TARGETPLATFORM}" == 'linux/amd64' ]]; then
   apt-get install -y --no-install-recommends \
@@ -69,6 +68,17 @@ apt-get clean
 rm -rf /var/lib/apt/lists/*
 _DEPS
 
+#Install Node
+# hadolint ignore=SC1091
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
+source "$HOME/.nvm/nvm.sh"
+nvm install 20.9.0
+nvm use 20.9.0
+_INSTALL_NODE
+
 # install cuda
 WORKDIR /build/cuda
 # versions: https://developer.nvidia.com/cuda-toolkit-archive
@@ -95,16 +105,18 @@ _INSTALL_CUDA
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 
 # cmake and cpack
+# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e
+#Set Node version
+source "$HOME/.nvm/nvm.sh"
+nvm use 20.9.0
+#Actually build
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
   -DCMAKE_BUILD_TYPE=Release \

diff --git a/docs/source/building/linux.rst b/docs/source/building/linux.rst
@@ -192,13 +192,6 @@ If the version of CUDA available from your distro is not adequate, manually inst
    ./cuda.run --silent --toolkit --toolkitpath=/usr --no-opengl-libs --no-man-page --no-drm
    rm ./cuda.run
 
-npm dependencies
-----------------
-Install npm dependencies.
-   .. code-block:: bash
-
-      npm install
-
 Build
 -----
 .. Attention:: Ensure you are in the build directory created during the clone step earlier before continuing.

diff --git a/docs/source/building/macos.rst b/docs/source/building/macos.rst
@@ -24,13 +24,6 @@ Install Requirements
       cd /usr/local/include
       ln -s ../opt/openssl/include/openssl .
 
-npm dependencies
-----------------
-Install npm dependencies.
-   .. code-block:: bash
-
-      npm install
-
 Build
 -----
 .. Attention:: Ensure you are in the build directory created during the clone step earlier before continuing.

diff --git a/docs/source/building/windows.rst b/docs/source/building/windows.rst
@@ -16,17 +16,8 @@ Install dependencies:
 
       pacman -S base-devel cmake diffutils gcc git make mingw-w64-x86_64-binutils \
       mingw-w64-x86_64-boost mingw-w64-x86_64-cmake mingw-w64-x86_64-curl \
-      mingw-w64-x86_64-onevpl mingw-w64-x86_64-openssl mingw-w64-x86_64-opus \
-      mingw-w64-x86_64-toolchain
-
-npm dependencies
-----------------
-Install nodejs and npm. Downloads available `here <https://nodejs.org/en/download/>`__.
-
-Install npm dependencies.
-   .. code-block:: bash
-
-      npm install
+      mingw-w64-x86_64-nodejs mingw-w64-x86_64-onevpl mingw-w64-x86_64-openssl \ 
+      mingw-w64-x86_64-opus mingw-w64-x86_64-toolchain
 
 Build
 -----

diff --git a/docs/source/conf.py b/docs/source/conf.py
@@ -69,7 +69,7 @@
 # -- Options for HTML output -------------------------------------------------
 
 # images
-html_favicon = os.path.join(root_dir, 'src_assets', 'common', 'assets', 'web', 'images', 'sunshine.ico')
+html_favicon = os.path.join(root_dir, 'src_assets', 'common', 'assets', 'web', 'public', 'images', 'sunshine.ico')
 html_logo = os.path.join(root_dir, 'sunshine.png')
 
 # Add any paths that contain custom static files (such as style sheets) here,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -84,3 +84,4 @@ elseif(UNIX)
		include(${CMAKE_MODULE_PATH}/dependencies/linux.cmake)
		endif()
		endif()