Add Basic Menu options to video list object

README.md

@@ -18,7 +18,7 @@ Enough of the rewrite has been done to hopefully provide code examples of what w
 
 ## What Needs to be Done?
 
-Like I mentioned above, there are a lot of things that need to be done.  I have created some issues over at the [issues](#) page to give a quick rundown on what needs to be done as well as what the requirements are in order for those issues to be considered complete.  I will make more issues with more requirements as progress is made.
+Like I mentioned above, there are a lot of things that need to be done.  I have created some issues over at the [issues](https://github.com/FreeTubeApp/FreeTube-Vue/issues) page to give a quick rundown on what needs to be done as well as what the requirements are in order for those issues to be considered complete.  I will make more issues with more requirements as progress is made.
 
 At this time, here is the list of things to do/need to do:
 
@@ -26,7 +26,7 @@ At this time, here is the list of things to do/need to do:
 - [x] Basic App Structure and Layout
 - [x] Video Layout (Along with Channel and Playlist Layout)
 - [x] Search / Search View (Along with Filters)
-- [ ] Search Suggestions
+- [x] Search Suggestions
 - [x] Channel View
 - [x] Channel Search
 - [x] Trending Page
@@ -42,7 +42,7 @@ At this time, here is the list of things to do/need to do:
 - [ ] History Page and Logic
 - [ ] Profile Page and Logic
 - [ ] Misc. Adjustments and Settings
-- [ ] Packagaing and Testing
+- [ ] Packaging and Testing
 
 This list is somewhat in order of when I plan on working on each thing.  Obviously things can change and anyone is welcome to work on whatever they like.
 

src/renderer/components/ft-icon-button/ft-icon-button.css

@@ -11,13 +11,16 @@
   padding: 10px;
   font-size: 20px;
   border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0,0,0,.5);
   cursor: pointer;
   -moz-transition: background 0.2s ease-out;
   -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
 }
 
+.shadow {
+  box-shadow: 0 1px 2px rgba(0,0,0,.5);
+}
+
 .iconButton:hover {
   -moz-transition: background 0.2s ease-in;
   -o-transition: background 0.2s ease-in;
@@ -105,9 +108,9 @@
 }
 
 .left {
-  right: 100%;
+  right: 50%;
 }
 
 .right {
-  left: 100%;
+  left: 50%;
 }

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -15,6 +15,10 @@ export default Vue.extend({
       type: String,
       default: 'base'
     },
+    useShadow: {
+      type: Boolean,
+      default: true
+    },
     dropdownPosition: {
       type: String,
       default: 'center'

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -7,7 +7,8 @@
       :class="{
         base: theme === 'base',
         primary: theme === 'primary',
-        secondary: theme === 'secondary'
+        secondary: theme === 'secondary',
+        shadow: useShadow
       }"
       @click="handleIconClick"
     />

src/renderer/components/ft-list-video/ft-list-video.css

@@ -83,6 +83,15 @@
   cursor: pointer;
 }
 
+/deep/ .iconButton {
+  font-size: 15px;
+  padding: 8px;
+}
+
+/deep/ .iconDropdown {
+  margin-top: 30px;
+}
+
 .grid {
   width: 240px;
   height: 250px;
@@ -105,8 +114,15 @@
   height: 110px;
 }
 
+.grid .optionsButton {
+  margin-top: 10px;
+  margin-left: 210px;
+  position: absolute;
+}
+
 .grid .videoTitle {
   max-height: 55px;
+  width: 210px;
   overflow-y: hidden;
   margin-bottom: -15px;
 }
@@ -144,6 +160,10 @@
   height: 130px;
 }
 
+.list .optionsButton {
+  float: right;
+}
+
 .list .videoTitle {
   margin-left: 250px;
   margin-top: 5px;

src/renderer/components/ft-list-video/ft-list-video.js

@@ -1,7 +1,11 @@
 import Vue from 'vue'
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 
 export default Vue.extend({
   name: 'FtListVideo',
+  components: {
+    'ft-icon-button': FtIconButton
+  },
   props: {
     data: {
       type: Object,
@@ -30,10 +34,30 @@ export default Vue.extend({
       progressPercentage: 0,
       isLive: false,
       isFavorited: false,
-      hideViews: false
+      hideViews: false,
+      optionsNames: [
+        'Open in YouTube',
+        'Copy YouTube Link',
+        'Open YouTube Embedded Player',
+        'Copy YouTube Embedded Player Link',
+        'Open in Invidious',
+        'Copy Invidious Link'
+      ],
+      optionsValues: [
+        'openYoutube',
+        'copyYoutube',
+        'openYoutubeEmbed',
+        'copyYoutubeEmbed',
+        'openInvidious',
+        'copyInvidious'
+      ]
     }
   },
   computed: {
+    usingElectron: function () {
+      return this.$store.getters.getUsingElectron
+    },
+
     listType: function () {
       return this.$store.getters.getListType
     },
@@ -50,6 +74,18 @@ export default Vue.extend({
       return this.$store.getters.getInvidiousInstance
     },
 
+    invidiousUrl: function () {
+      return `${this.invidiousInstance}/watch?v=${this.id}`
+    },
+
+    youtubeUrl: function () {
+      return `https://www.youtube.com/watch?v=${this.id}`
+    },
+
+    youtubeEmbedUrl: function () {
+      return `https://www.youtube-nocookie.com/embed/${this.id}`
+    },
+
     thumbnail: function () {
       let baseUrl
       if (this.backendPreference === 'invidious') {
@@ -113,6 +149,42 @@ export default Vue.extend({
       console.log('TODO: ft-list-video method toggleSave')
     },
 
+    handleOptionsClick: function (option) {
+      console.log('Handling share')
+      console.log(option)
+
+      switch (option) {
+        case 'copyYoutube':
+          navigator.clipboard.writeText(this.youtubeUrl)
+          break
+        case 'openYoutube':
+          if (this.usingElectron) {
+            const shell = require('electron').shell
+            shell.openExternal(this.youtubeUrl)
+          }
+          break
+        case 'copyYoutubeEmbed':
+          navigator.clipboard.writeText(this.youtubeEmbedUrl)
+          break
+        case 'openYoutubeEmbed':
+          if (this.usingElectron) {
+            const shell = require('electron').shell
+            shell.openExternal(this.youtubeEmbedUrl)
+          }
+          break
+        case 'copyInvidious':
+          navigator.clipboard.writeText(this.invidiousUrl)
+          break
+        case 'openInvidious':
+          if (this.usingElectron) {
+            console.log('using electron')
+            const shell = require('electron').shell
+            shell.openExternal(this.invidiousUrl)
+          }
+          break
+      }
+    },
+
     // For Invidious data, as duration is sent in seconds
     calculateVideoDuration: function (lengthSeconds) {
       let durationText = ''

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -37,6 +37,16 @@
         :style="{width: progressPercentage + '%'}"
       />
     </div>
+    <ft-icon-button
+      class="optionsButton"
+      title="More Options"
+      theme="base"
+      :use-shadow="false"
+      dropdown-position="left"
+      :dropdown-names="optionsNames"
+      :dropdown-values="optionsValues"
+      @click="handleOptionsClick"
+    />
     <p
       class="videoTitle"
       @click="play(id)"