diff --git a/README.md b/README.md index f789d284..b08eb882 100644 --- a/README.md +++ b/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. diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.css b/src/renderer/components/ft-icon-button/ft-icon-button.css index 1dd1eadf..89e3fb62 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.css +++ b/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%; } diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js index 8fe06aca..9e4f7f79 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.js +++ b/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' diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue index a0432bf4..098e4398 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.vue +++ b/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" /> diff --git a/src/renderer/components/ft-list-video/ft-list-video.css b/src/renderer/components/ft-list-video/ft-list-video.css index 8266ad91..52c13222 100644 --- a/src/renderer/components/ft-list-video/ft-list-video.css +++ b/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; diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js index bed3de09..fa63d7da 100644 --- a/src/renderer/components/ft-list-video/ft-list-video.js +++ b/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 = '' diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue index d5c64185..09503a05 100644 --- a/src/renderer/components/ft-list-video/ft-list-video.vue +++ b/src/renderer/components/ft-list-video/ft-list-video.vue @@ -37,6 +37,16 @@ :style="{width: progressPercentage + '%'}" /> +