[Web] Magnet link, Main window toolbar accessibility, ARM build fix, Dependencies update (#2586)

Add magnet link to web client's torrent inspector

.gitignore

@@ -1,3 +1,4 @@
+.idea
 .vscode
 /REVISION
 /beta

web/.nvmrc

@@ -0,0 +1 @@
+v16.14.0

web/package.json

@@ -18,20 +18,19 @@
     "lint:stylelint:fix": "stylelint --fix style/*scss"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/eslint-parser": "^7.14.3",
+    "@babel/core": "^7.14.8",
+    "@babel/eslint-parser": "^7.14.9",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "css-loader": "^5.2.4",
-    "css-minimizer-webpack-plugin": "^3.0.0",
+    "css-loader": "^5.2.7",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "eslint": "^7.26.0",
     "eslint-plugin-sonarjs": "^0.7.0",
     "eslint-plugin-unicorn": "^32.0.1",
     "file-loader": "^6.2.0",
-    "img-optimize-loader": "^1.0.7",
-    "mini-css-extract-plugin": "^1.6.0",
-    "node-sass": "^6.0.0",
+    "mini-css-extract-plugin": "^1.6.2",
+    "node-sass": "^6.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.2",
     "sass": "^1.32.13",
     "sass-loader": "^11.1.1",
     "style-loader": "^2.0.0",
@@ -40,14 +39,14 @@
     "stylelint-config-primer": "^11.0.1",
     "stylelint-config-sass-guidelines": "^8.0.0",
     "stylelint-config-standard": "^22.0.0",
-    "svgo": "^2.3.0",
+    "svgo": "^2.3.1",
     "svgo-loader": "^3.0.0",
-    "terser-webpack-plugin": "^5.1.2",
+    "terser-webpack-plugin": "^5.1.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.37.0",
+    "webpack": "^5.37.1",
     "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.3"
   },
   "dependencies": {
     "lodash.isequal": "^4.5.0"

web/public_html/index.html

@@ -24,22 +24,24 @@
           class="toolbar-button"
           data-action="open-torrent"
           id="toolbar-open"
+          tabindex="0"
         ></button>
         <button
           aria-keyshortcuts="Alt+Delete"
           aria-label="Remove selected torrents"
           class="toolbar-button"
           data-action="remove-selected-torrents"
-          href="#"
           id="toolbar-remove"
+          tabindex="0"
         ></button>
-        <div href="#" class="toolbar-separator"></div>
+        <div class="toolbar-separator"></div>
         <button
           aria-keyshortcuts="Alt+R"
           aria-label="Resume selected torrents"
           class="toolbar-button"
           data-action="resume-selected-torrents"
           id="toolbar-start"
+          tabindex="0"
         ></button>
         <button
           aria-keyshortcuts="Alt+P"
@@ -47,14 +49,16 @@
           class="toolbar-button"
           data-action="pause-selected-torrents"
           id="toolbar-pause"
+          tabindex="0"
         ></button>
-        <div href="#" class="toolbar-separator"></div>
+        <div class="toolbar-separator"></div>
         <button
           aria-keyshortcuts="Alt+I"
           aria-label="Toggle inspector"
           class="toolbar-button"
           data-action="show-inspector"
           id="toolbar-inspector"
+          tabindex="0"
         ></button>
         <div class="toolbar-separator"></div>
         <button
@@ -63,6 +67,7 @@
           class="toolbar-button"
           data-action="show-overflow-menu"
           id="toolbar-overflow"
+          tabindex="0"
         ></button>
       </header>
 

web/src/inspector.js

@@ -115,6 +115,7 @@ export class Inspector extends EventTarget {
       ['hash', 'Hash:'],
       ['privacy', 'Privacy:'],
       ['origin', 'Origin:'],
+      ['magnetLink', 'Magnet:'],
       ['comment', 'Comment:'],
     ];
     for (const [name, text] of rows) {
@@ -528,6 +529,19 @@ export class Inspector extends EventTarget {
       string = torrents.every((t) => get(t) === first) ? first : mixed;
     }
     setTextContent(e.info.location, string);
+
+    // magnetLink
+    if (torrents.length === 0) {
+      setTextContent(e.info.magnetLink, none);
+    } else if (torrents.length > 1) {
+      setTextContent(e.info.magnetLink, mixed);
+    } else {
+      const link = torrents[0].getMagnetLink();
+      Utils.setInnerHTML(
+        e.info.magnetLink,
+        `<a class="inspector-info-magnet" href="${link}"><button></button></a>`
+      );
+  }
   }
 
   ///  PEERS PAGE

web/src/torrent.js

@@ -209,6 +209,9 @@ export class Torrent extends EventTarget {
   getLeftUntilDone() {
     return this.fields.leftUntilDone;
   }
+  getMagnetLink() {
+    return this.fields.magnetLink;
+  }
   getMetadataPercentComplete() {
     return this.fields.metadataPercentComplete;
   }
@@ -653,6 +656,7 @@ Torrent.Fields.InfoExtra = [
   'files',
   'hashString',
   'isPrivate',
+  'magnetLink',
   'pieceCount',
   'pieceSize',
 ];

web/style/images/README.md

@@ -25,6 +25,7 @@ license: MIT
 * files.svg
 * gear-fill.svg
 * lock-fill.svg
+* magnet.svg
 * search.svg
 * three-dots-vertical.svg
 

web/style/images/magnet.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-magnet" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 1a7 7 0 0 0-7 7v3h4V8a3 3 0 0 1 6 0v3h4V8a7 7 0 0 0-7-7Zm7 11h-4v3h4v-3ZM5 12H1v3h4v-3ZM0 8a8 8 0 1 1 16 0v8h-6V8a2 2 0 1 0-4 0v8H0V8Z"/>
+</svg>

web/style/transmission-app.scss

@@ -42,6 +42,7 @@ $image-chevron-dn: 'images/chevron-down.svg';
 $image-chevron-up: 'images/chevron-up.svg';
 $image-lock-fill: 'images/lock-fill.svg';
 $image-network: 'images/router.svg';
+$image-magnet: 'images/magnet.svg';
 $image-overflow: 'images/three-dots-vertical.svg';
 $image-pause-circle-active: 'images/pause-circle-active.svg';
 $image-pause-circle-idle: 'images/pause-circle-idle.svg';
@@ -934,6 +935,20 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
   }
 }
 
+.inspector-info-magnet {
+  button {
+    background-color: transparent;
+    background-image: url($image-magnet);
+    background-position: top;
+    background-repeat: no-repeat;
+    border: 0;
+    cursor: pointer;
+    height: 1rem;
+    vertical-align: middle;
+    width: 1rem;
+  }
+}
+
 #inspector .tabs-button,
 #prefs-dialog .tabs-button {
   background-size: 20px 20px, 40px 30px;