Feature/new window right click (#2027)

* right click menu for open in a new window

* open video in new window when right click

* router link added to channel images for easier selection in the context of a context menu

* fix security bug user can visit other website via freetube

* simplify context menu entry condition

* createWindow in open new window adapted with the merged function

* Change the open new window selector for the origin of the page no matter the name of the website

* Keypress reintegrate into the code for accesibility

* Keypress reintegrate into the code for accesibility

* Fix style for sidenav subscription links

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

src/main/index.js

@@ -27,6 +27,13 @@ function runApp() {
         click: () => {
           browserWindow.webContents.send('showVideoStatistics')
         }
+      },
+      {
+        label: 'Open in a New Window',
+        visible: parameters.linkURL.includes((new URL(browserWindow.webContents.getURL())).origin),
+        click: () => {
+          createWindow({ replaceMainWindow: false, windowStartupUrl: parameters.linkURL, showWindowNow: true })
+        }
       }
     ]
   })

src/renderer/components/side-nav/side-nav.css

@@ -89,6 +89,11 @@
   transform: translateY(-50%);
 }
 
+.channelLink {
+  color: inherit;
+  text-decoration: inherit;
+}
+
 .channelThumbnail {
   border-radius: 50%;
   width: 35px;

src/renderer/components/side-nav/side-nav.js

@@ -77,7 +77,6 @@ export default Vue.extend({
     navigate: function (route) {
       this.$router.push('/' + route)
     },
-
     goToChannel: function (id) {
       this.$router.push({ path: `/channel/${id}` })
     }

src/renderer/components/side-nav/side-nav.vue

@@ -224,23 +224,28 @@
           :title="channel.name"
           role="button"
           tabindex="0"
-          @click="goToChannel(channel.id)"
           @keypress="goToChannel(channel.id)"
+          @click="goToChannel(channel.id)"
         >
-          <div
+          <router-link
-            class="thumbnailContainer"
+            :to="`/channel/${channel.id}`"
+            class="channelLink"
           >
-            <img
+            <div
-              class="channelThumbnail"
+              class="thumbnailContainer"
-              :src="channel.thumbnail"
             >
-          </div>
+              <img
-          <p
+                class="channelThumbnail"
-            v-if="isOpen"
+                :src="channel.thumbnail"
-            class="navLabel"
+              >
-          >
+            </div>
-            {{ channel.name }}
+            <p
-          </p>
+              v-if="isOpen"
+              class="navLabel"
+            >
+              {{ channel.name }}
+            </p>
+          </router-link>
         </div>
       </div>
     </div>

src/renderer/components/watch-video-info/watch-video-info.sass

@@ -86,3 +86,7 @@
     :deep(.iconDropdown)
       left: calc(50% - 20px)
       right: auto
+
+.channelLink
+  color: inherit
+  text-decoration: inherit

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -13,19 +13,28 @@
           class="profileRow"
         >
           <div>
-            <img
+            <router-link
-              :src="channelThumbnail"
+              :to="`/channel/${channelId}`"
-              class="channelThumbnail"
-              @click="goToChannel"
             >
+              <img
+                :src="channelThumbnail"
+                class="channelThumbnail"
+                @click="goToChannel"
+              >
+            </router-link>
           </div>
           <div>
-            <div
+            <router-link
-              class="channelName"
+              :to="`/channel/${channelId}`"
-              @click="goToChannel"
+              class="channelLink"
             >
-              {{ channelName }}
+              <div
-            </div>
+                class="channelName"
+                @click="goToChannel"
+              >
+                {{ channelName }}
+              </div>
+            </router-link>
             <ft-button
               v-if="!hideUnsubscribeButton"
               :label="subscribedText"