From 420a91a0721b49ee335dd567c97fea5709d656b8 Mon Sep 17 00:00:00 2001
From: Bryan-Elliott Tam <constraintAutomaton@protonmail.com>
Date: Thu, 22 Sep 2022 09:03:18 -0400
Subject: [PATCH] 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                             |  7 +++++
 src/renderer/components/side-nav/side-nav.css |  5 +++
 src/renderer/components/side-nav/side-nav.js  |  1 -
 src/renderer/components/side-nav/side-nav.vue | 31 +++++++++++--------
 .../watch-video-info/watch-video-info.sass    |  4 +++
 .../watch-video-info/watch-video-info.vue     | 27 ++++++++++------
 6 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 5998ec39..dff15bef 100644
--- a/src/main/index.js
+++ b/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 })
+        }
       }
     ]
   })
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 5e0877b8..738c3961 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/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;
diff --git a/src/renderer/components/side-nav/side-nav.js b/src/renderer/components/side-nav/side-nav.js
index 60b81295..96945540 100644
--- a/src/renderer/components/side-nav/side-nav.js
+++ b/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}` })
     }
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index ccfd1a6c..f859356f 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/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
-            class="thumbnailContainer"
+          <router-link
+            :to="`/channel/${channel.id}`"
+            class="channelLink"
           >
-            <img
-              class="channelThumbnail"
-              :src="channel.thumbnail"
+            <div
+              class="thumbnailContainer"
             >
-          </div>
-          <p
-            v-if="isOpen"
-            class="navLabel"
-          >
-            {{ channel.name }}
-          </p>
+              <img
+                class="channelThumbnail"
+                :src="channel.thumbnail"
+              >
+            </div>
+            <p
+              v-if="isOpen"
+              class="navLabel"
+            >
+              {{ channel.name }}
+            </p>
+          </router-link>
         </div>
       </div>
     </div>
diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index 132d9f21..4a24dea7 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/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
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 1aef3f69..b759dc74 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -13,19 +13,28 @@
           class="profileRow"
         >
           <div>
-            <img
-              :src="channelThumbnail"
-              class="channelThumbnail"
-              @click="goToChannel"
+            <router-link
+              :to="`/channel/${channelId}`"
             >
+              <img
+                :src="channelThumbnail"
+                class="channelThumbnail"
+                @click="goToChannel"
+              >
+            </router-link>
           </div>
           <div>
-            <div
-              class="channelName"
-              @click="goToChannel"
+            <router-link
+              :to="`/channel/${channelId}`"
+              class="channelLink"
             >
-              {{ channelName }}
-            </div>
+              <div
+                class="channelName"
+                @click="goToChannel"
+              >
+                {{ channelName }}
+              </div>
+            </router-link>
             <ft-button
               v-if="!hideUnsubscribeButton"
               :label="subscribedText"