Share buttons do stuff

This commit is contained in:
Cadence Ember 2020-06-18 01:36:44 +12:00
parent f799887e60
commit 721e7eda2a
No known key found for this signature in database
GPG Key ID: 128B99B1B74A6412
4 changed files with 121 additions and 21 deletions

View File

@ -8,5 +8,68 @@ export default Vue.extend({
components: {
'ft-icon-button': FtIconButton,
'ft-button': FtButton
},
props: {
id: {
type: String,
required: true
}
},
computed: {
invidiousInstance: function () {
return this.$store.getters.getInvidiousInstance
},
usingElectron: function () {
return this.$store.getters.getUsingElectron
},
},
methods: {
copy(text) {
navigator.clipboard.writeText(text)
},
open(url) {
if (this.usingElectron) {
const shell = require('electron').shell
shell.openExternal(url)
}
},
getInvidiousURL() {
return `${this.invidiousInstance}/watch?v=${this.id}`
},
getYoutubeURL() {
return `https://www.youtube.com/watch?v=${this.id}`
},
getYoutubeEmbedURL() {
return `https://www.youtube-nocookie.com/embed/${this.id}`
},
openInvidious() {
this.open(this.getInvidiousURL())
},
copyInvidious() {
this.copy(this.getInvidiousURL())
},
openYoutube() {
this.open(this.getYoutubeURL())
},
copyYoutube() {
this.copy(this.getYoutubeURL())
},
openYoutubeEmbed() {
this.open(this.getYoutubeEmbedURL())
},
copyYoutubeEmbed() {
this.copy(this.getYoutubeEmbedURL())
}
}
})

View File

@ -1,6 +1,6 @@
.shareLinks
display: grid
grid-template-rows: auto auto auto
grid-template-rows: auto auto
grid-auto-flow: column
padding: 12px
width: max-content
@ -11,6 +11,10 @@
margin: 4px 0px 8px
color: var(--primary-text-color)
.buttons
display: flex
flex-direction: column
.action
padding: 6px

View File

@ -10,28 +10,58 @@
<img class="youtubeLogo" src="~../../assets/img/yt_logo_mono_dark.png" alt="YouTube" width="794" height="178">
</div>
<ft-button class="action">
<font-awesome-icon icon="copy"></font-awesome-icon>
<div class="buttons">
<ft-button
class="action"
@click="copyYoutube()"
>
<font-awesome-icon icon="copy"/>
Copy link
</ft-button>
<ft-button class="action">
<font-awesome-icon icon="globe"></font-awesome-icon>
<ft-button
class="action"
@click="openYoutube()"
>
<font-awesome-icon icon="globe"/>
Open link
</ft-button>
<ft-button
class="action"
@click="copyYoutubeEmbed()"
>
<font-awesome-icon icon="file-video"/>
Copy embed
</ft-button>
<ft-button
class="action"
@click="openYoutubeEmbed()"
>
<font-awesome-icon icon="file-video"/>
Open embed
</ft-button>
</div>
<div class="divider"></div>
<div class="header invidious"><span class="invidiousLogo"></span>Invidious</div>
<div class="header invidious"><span class="invidiousLogo"/>Invidious</div>
<ft-button class="action">
<font-awesome-icon icon="copy"></font-awesome-icon>
<div class="buttons">
<ft-button
class="action"
@click="copyInvidious()"
>
<font-awesome-icon icon="copy"/>
Copy link
</ft-button>
<ft-button class="action">
<font-awesome-icon icon="globe"></font-awesome-icon>
<ft-button
class="action"
@click="openInvidious()"
>
<font-awesome-icon icon="globe"/>
Open link
</ft-button>
</div>
</div>
</ft-icon-button>
</template>

View File

@ -71,7 +71,10 @@
:dropdown-values="formatTypeValues"
@click="handleFormatChange"
/>
<ft-share-button class="option"></ft-share-button>
<ft-share-button
class="option"
:id="id"
/>
</div>
</div>
</ft-card>