diff --git a/.github/workflows/actions.yml b/.github/workflows/actions.yml index 8548a8a6e..65589dfb9 100644 --- a/.github/workflows/actions.yml +++ b/.github/workflows/actions.yml @@ -70,6 +70,8 @@ jobs: runs-on: ubuntu-22.04 needs: [ what-to-make ] if: ${{ needs.what-to-make.outputs.test-style == 'true' }} + env: + NODE_PATH: /usr/lib/nodejs:/usr/share/nodejs steps: - name: Show Configuration run: | @@ -85,7 +87,7 @@ jobs: set -ex wget -O - https://apt.llvm.org/llvm-snapshot.gpg.key | sudo apt-key add - sudo add-apt-repository "deb http://apt.llvm.org/jammy/ llvm-toolchain-jammy-15 main" - sudo apt-get install -y clang-format-15 npm yarn + sudo apt-get install -y clang-format-15 npm - name: Check for style diffs id: check-for-diffs working-directory: . @@ -114,6 +116,8 @@ jobs: runs-on: ubuntu-22.04 needs: [ what-to-make ] if: ${{ needs.what-to-make.outputs.make-tests == 'true' }} + env: + NODE_PATH: /usr/lib/nodejs:/usr/share/nodejs steps: - name: Show Configuration run: | @@ -137,7 +141,8 @@ jobs: libnatpmp-dev \ libpsl-dev \ libssl-dev \ - ninja-build + ninja-build \ + npm - name: Get Source uses: actions/checkout@v3 with: @@ -180,7 +185,7 @@ jobs: echo '${{ toJSON(runner) }}' sw_vers - name: Get Dependencies - run: brew install cmake gettext libdeflate libevent libnatpmp libpsl@0.21.1 miniupnpc ninja + run: brew install cmake gettext libdeflate libevent libnatpmp libpsl miniupnpc ninja node - name: Get Dependencies (GTK) if: ${{ needs.what-to-make.outputs.make-gtk == 'true' }} run: brew install gtkmm3 libjpeg @@ -209,7 +214,7 @@ jobs: -DENABLE_QT=${{ (needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} \ -DENABLE_TESTS=OFF \ -DENABLE_UTILS=${{ (needs.what-to-make.outputs.make-utils == 'true') && 'ON' || 'OFF' }} \ - -DENABLE_WEB=OFF \ + -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} \ -DENABLE_WERROR=ON \ -DRUN_CLANG_TIDY=OFF - name: Make @@ -255,6 +260,7 @@ jobs: linux-headers \ miniupnpc-dev \ ninja \ + npm \ pkgconfig \ xz - name: Get Dependencies (GTK) @@ -284,7 +290,7 @@ jobs: -DENABLE_QT=${{ (needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} \ -DENABLE_TESTS=OFF \ -DENABLE_UTILS=${{ (needs.what-to-make.outputs.make-utils == 'true') && 'ON' || 'OFF' }} \ - -DENABLE_WEB=OFF \ + -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} \ -DENABLE_WERROR=ON \ -DRUN_CLANG_TIDY=OFF - name: Make @@ -322,7 +328,8 @@ jobs: choco install ` jom ` - nasm + nasm ` + nodejs choco uninstall ` openssl.light (Join-Path $Env:ProgramFiles NASM) | Out-File $Env:GITHUB_PATH -Append @@ -376,7 +383,7 @@ jobs: -DENABLE_QT=${{ (needs.what-to-make.outputs.make-dist == 'true' || needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} ` -DENABLE_TESTS=ON ` -DENABLE_UTILS=ON ` - -DENABLE_WEB=OFF ` + -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} ` -DENABLE_WERROR=ON ` -DRUN_CLANG_TIDY=OFF - name: Make @@ -451,7 +458,7 @@ jobs: echo '${{ toJSON(runner) }}' sw_vers - name: Get Dependencies - run: brew install cmake gettext libdeflate libevent libnatpmp libpsl@0.21.1 miniupnpc ninja + run: brew install cmake gettext libdeflate libevent libnatpmp libpsl miniupnpc ninja node - name: Get Dependencies (GTK) if: ${{ needs.what-to-make.outputs.make-gtk == 'true' }} run: brew install gtkmm3 libjpeg @@ -481,7 +488,7 @@ jobs: -DENABLE_QT=${{ (needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} \ -DENABLE_TESTS=${{ (needs.what-to-make.outputs.make-tests == 'true') && 'ON' || 'OFF' }} \ -DENABLE_UTILS=${{ (needs.what-to-make.outputs.make-utils == 'true') && 'ON' || 'OFF' }} \ - -DENABLE_WEB=OFF \ + -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} \ -DENABLE_WERROR=ON \ -DRUN_CLANG_TIDY=OFF - name: Make @@ -502,6 +509,8 @@ jobs: needs: [ make-source-tarball, what-to-make ] if: ${{ needs.what-to-make.outputs.make-cli == 'true' || needs.what-to-make.outputs.make-daemon == 'true' || needs.what-to-make.outputs.make-gtk == 'true' || needs.what-to-make.outputs.make-qt == 'true' || needs.what-to-make.outputs.make-tests == 'true' || needs.what-to-make.outputs.make-utils == 'true' }} runs-on: ubuntu-22.04 + env: + NODE_PATH: /usr/lib/nodejs:/usr/share/nodejs container: image: debian:11-slim steps: @@ -528,6 +537,7 @@ jobs: libpsl-dev \ libssl-dev \ ninja-build \ + npm \ pkg-config \ xz-utils - name: Get Dependencies (GTK) @@ -557,7 +567,7 @@ jobs: -DENABLE_QT=${{ (needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} \ -DENABLE_TESTS=${{ (needs.what-to-make.outputs.make-tests == 'true') && 'ON' || 'OFF' }} \ -DENABLE_UTILS=${{ (needs.what-to-make.outputs.make-utils == 'true') && 'ON' || 'OFF' }} \ - -DENABLE_WEB=OFF \ + -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} \ -DENABLE_WERROR=ON \ -DRUN_CLANG_TIDY=OFF - name: Build @@ -576,6 +586,8 @@ jobs: needs: [ make-source-tarball, what-to-make ] if: ${{ needs.what-to-make.outputs.make-cli == 'true' || needs.what-to-make.outputs.make-daemon == 'true' || needs.what-to-make.outputs.make-gtk == 'true' || needs.what-to-make.outputs.make-qt == 'true' || needs.what-to-make.outputs.make-tests == 'true' || needs.what-to-make.outputs.make-utils == 'true' }} runs-on: ubuntu-22.04 + env: + NODE_PATH: /usr/lib/nodejs:/usr/share/nodejs container: image: fedora:36 steps: @@ -600,6 +612,7 @@ jobs: libpsl-devel \ miniupnpc-devel \ ninja-build \ + npm \ openssl-devel \ pkgconf-pkg-config \ xz @@ -630,7 +643,7 @@ jobs: -DENABLE_QT=${{ (needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} \ -DENABLE_TESTS=${{ (needs.what-to-make.outputs.make-tests == 'true') && 'ON' || 'OFF' }} \ -DENABLE_UTILS=${{ (needs.what-to-make.outputs.make-utils == 'true') && 'ON' || 'OFF' }} \ - -DENABLE_WEB=OFF \ + -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} \ -DENABLE_WERROR=ON \ -DRUN_CLANG_TIDY=OFF - name: Build diff --git a/CMakeLists.txt b/CMakeLists.txt index 7638a676f..93c41fd90 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -45,7 +45,7 @@ option(ENABLE_DAEMON "Build daemon" ON) tr_auto_option(ENABLE_GTK "Build GTK client" AUTO) tr_auto_option(ENABLE_QT "Build Qt client" AUTO) tr_auto_option(ENABLE_MAC "Build Mac client" AUTO) -option(ENABLE_WEB "Build Web client" OFF) +tr_auto_option(ENABLE_WEB "Build Web client" AUTO) option(ENABLE_UTILS "Build utils (create, edit, show)" ON) option(ENABLE_CLI "Build command-line client" OFF) option(ENABLE_TESTS "Build unit tests" ON) @@ -724,6 +724,22 @@ if(ENABLE_GTK AND ENABLE_NLS) add_subdirectory(po) endif() +if("${ENABLE_WEB}" STREQUAL "AUTO") + message(STATUS "searching for npm") + find_program(NPM npm) + message(STATUS "searching for npm - ${NPM}") + if ("${NPM}" STREQUAL "NPM-NOTFOUND") + set(ENABLE_WEB OFF) + else() + set(ENABLE_WEB ON) + endif() +endif() +if ("${ENABLE_WEB}" STREQUAL "ON") + message(STATUS "searching for npm") + find_program(NPM npm REQUIRED) + message(STATUS "searching for npm - ${NPM}") +endif() + foreach(P cli daemon gtk mac qt utils web) string(TOUPPER "${P}" P_ID) if(ENABLE_${P_ID}) diff --git a/web/CMakeLists.txt b/web/CMakeLists.txt index bc7fd959e..28e349fd7 100644 --- a/web/CMakeLists.txt +++ b/web/CMakeLists.txt @@ -1,4 +1,4 @@ -set(TRANSMISSION_WEB_SOURCES +set(WEB_SOURCES src/about-dialog.js src/action-manager.js src/alert-dialog.js @@ -6,6 +6,7 @@ set(TRANSMISSION_WEB_SOURCES src/file-row.js src/formatter.js src/inspector.js + src/labels-dialog.js src/main.js src/move-dialog.js src/notifications.js @@ -21,40 +22,68 @@ set(TRANSMISSION_WEB_SOURCES src/torrent.js src/torrent-row.js src/transmission.js - src/utils.js + src/utils.js) + +set(WEB_STYLES assets/css/transmission-app.scss) -set(TRANSMISSION_WEB_IMAGES +set(WEB_IMAGES assets/img/box.svg - assets/img/film.svg - assets/img/modern-tortoise-blue.png - assets/img/modern-tortoise.png assets/img/chevron-down.svg assets/img/chevron-up.svg + assets/img/file-text.svg + assets/img/film.svg + assets/img/folder.svg assets/img/horizontal-rule.svg + assets/img/image.svg assets/img/lock-fill.svg assets/img/logo.png - assets/img/image.svg assets/img/magnet.svg + assets/img/modern-tortoise-blue.png + assets/img/modern-tortoise.png assets/img/music.svg - assets/img/file-text.svg assets/img/package.svg - assets/img/folder.svg assets/img/pause-circle-active.svg assets/img/pause-circle-idle.svg assets/img/play-circle-active.svg assets/img/play-circle-idle.svg + assets/img/README.md assets/img/router.svg assets/img/type.svg) -add_custom_target(transmission-web ALL - COMMAND ${CMAKE_COMMAND} -E copy "${CMAKE_CURRENT_SOURCE_DIR}/package.json" "${CMAKE_CURRENT_BINARY_DIR}/package.json" - COMMAND ${CMAKE_COMMAND} -E copy "${CMAKE_CURRENT_SOURCE_DIR}/package-lock.json" "${CMAKE_CURRENT_BINARY_DIR}/package-lock.json" - WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}" - COMMAND npm install - COMMAND npm run build -- --context "${CMAKE_CURRENT_SOURCE_DIR}" - BYPRODUCTS - public_html/transmission-app.js - public_html/transmission-app.js.LICENSE.txt - DEPENDS ${TRANSMISSION_WEB_IMAGES} - SOURCES ${TRANSMISSION_WEB_SOURCES}) +add_custom_command( + OUTPUT + "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js" + "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js.map" + "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js.LICENSE.txt" + WORKING_DIRECTORY + "${CMAKE_CURRENT_BINARY_DIR}" + COMMAND "${CMAKE_COMMAND}" -E copy + "${CMAKE_CURRENT_SOURCE_DIR}/babel.config.js" + "${CMAKE_CURRENT_SOURCE_DIR}/package-lock.json" + "${CMAKE_CURRENT_SOURCE_DIR}/package.json" + "${CMAKE_CURRENT_SOURCE_DIR}/prettier.config.js" + "${CMAKE_CURRENT_SOURCE_DIR}/stylelint.config.js" + "${CMAKE_CURRENT_SOURCE_DIR}/webpack.config.js" + "${CMAKE_CURRENT_BINARY_DIR}" + COMMAND "${CMAKE_COMMAND}" -E copy_directory + "${CMAKE_CURRENT_SOURCE_DIR}/assets" "assets" + COMMAND "${CMAKE_COMMAND}" -E copy_directory + "${CMAKE_CURRENT_SOURCE_DIR}/public_html" "public_html" + COMMAND "${CMAKE_COMMAND}" -E copy_directory + "${CMAKE_CURRENT_SOURCE_DIR}/src" "src" + COMMAND "${NPM}" ci --no-audit --no-fund --no-progress + COMMAND "${NPM}" run --silent build + DEPENDS + ${WEB_SOURCES} + ${WEB_STYLES} + ${WEB_IMAGES}) + +add_custom_target("${TR_NAME}-web" + ALL + DEPENDS + "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js" + "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js.map" + "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js.LICENSE.txt" + SOURCES + ${WEB_SOURCES}) diff --git a/web/src/transmission.js b/web/src/transmission.js index a92fe3b48..567b49a31 100644 --- a/web/src/transmission.js +++ b/web/src/transmission.js @@ -61,7 +61,7 @@ export class Transmission extends EventTarget { ); // listen to actions - // TODO: consider adding a mutator listener here to pick up dynamic additions + // TODO: consider adding a mutator listener here to see dynamic additions for (const element of document.querySelectorAll(`button[data-action]`)) { const { action } = element.dataset; setEnabled(element, this.action_manager.isEnabled(action));