Merge branch 'remote-link' into 'develop'

Added link to origin pod for track, album, artist, profile, channel and library

See merge request funkwhale/funkwhale!1219

front/src/components/library/AlbumDropdown.vue

@@ -20,6 +20,15 @@
     <button class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
       <i class="ellipsis vertical icon"></i>
       <div class="menu">
+        <a
+          :href="object.fid"
+          v-if="domain != $store.getters['instance/domain']"
+          target="_blank"
+          class="basic item">
+          <i class="external icon"></i>
+          <translate :translate-params="{domain: domain}" translate-context="Content/*/Button.Label/Verb">View on %{ domain }</translate>
+        </a>
+
         <div
           role="button"
           v-if="isEmbedable"
@@ -86,6 +95,7 @@ import EmbedWizard from "@/components/audio/EmbedWizard"
 import Modal from '@/components/semantic/Modal'
 import ReportMixin from '@/components/mixins/Report'
 
+import {getDomain} from '@/utils'
 
 export default {
   mixins: [ReportMixin],
@@ -108,6 +118,11 @@ export default {
     }
   },
   computed: {
+    domain () {
+      if (this.object) {
+        return getDomain(this.object.fid)
+      }
+    },
     labels() {
       return {
         more: this.$pgettext('*/*/Button.Label/Noun', "More…"),

front/src/components/library/ArtistBase.vue

@@ -57,6 +57,15 @@
               <button class="ui floating dropdown icon button" ref="dropdown" v-dropdown>
                 <i class="dropdown icon"></i>
                 <div class="menu">
+                  <a
+                    :href="object.fid"
+                    v-if="domain != $store.getters['instance/domain']"
+                    target="_blank"
+                    class="basic item">
+                    <i class="external icon"></i>
+                    <translate :translate-params="{domain: domain}" translate-context="Content/*/Button.Label/Verb">View on %{ domain }</translate>
+                  </a>
+
                   <button
                     role="button"
                     v-if="publicLibraries.length > 0"
@@ -137,6 +146,8 @@ import RadioButton from "@/components/radios/Button"
 import TagsList from "@/components/tags/List"
 import ReportMixin from '@/components/mixins/Report'
 
+import {getDomain} from '@/utils'
+
 const FETCH_URL = "albums/"
 
 export default {
@@ -205,6 +216,11 @@ export default {
     }
   },
   computed: {
+    domain () {
+      if (this.object) {
+        return getDomain(this.object.fid)
+      }
+    },
     isPlayable() {
       return (
         this.object.albums.filter(a => {

front/src/components/library/TrackBase.vue

@@ -44,6 +44,14 @@
               <button class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
                 <i class="ellipsis vertical icon"></i>
                 <div class="menu" style="right: 0; left: auto">
+                  <a
+                    :href="track.fid"
+                    v-if="domain != $store.getters['instance/domain']"
+                    target="_blank"
+                    class="basic item">
+                    <i class="external icon"></i>
+                    <translate :translate-params="{domain: domain}" translate-context="Content/*/Button.Label/Verb">View on %{ domain }</translate>
+                  </a>
                   <div
                     role="button"
                     v-if="publicLibraries.length > 0"
@@ -116,6 +124,7 @@
 import time from "@/utils/time"
 import axios from "axios"
 import url from "@/utils/url"
+import {getDomain} from '@/utils'
 import logger from "@/logging"
 import PlayButton from "@/components/audio/PlayButton"
 import TrackFavoriteIcon from "@/components/favorites/TrackFavoriteIcon"
@@ -190,6 +199,11 @@ export default {
     }
   },
   computed: {
+    domain () {
+      if (this.track) {
+        return getDomain(this.track.fid)
+      }
+    },
     publicLibraries () {
       return this.libraries.filter(l => {
         return l.privacy_level === 'everyone'

front/src/utils.js

@@ -51,3 +51,9 @@ export function checkRedirectToLogin (store, router) {
     router.push({name: 'login', query: {next: router.currentRoute.fullPath}})
   }
 }
+
+export function getDomain (url) {
+  let parser = document.createElement("a")
+  parser.href = url
+  return parser.hostname
+}

front/src/views/auth/ProfileBase.vue

@@ -9,6 +9,14 @@
           <button class="ui pointing dropdown icon small basic right floated button" ref="dropdown" v-dropdown="{direction: 'downward'}" style="position: absolute; right: 1em; top: 1em;">
             <i class="ellipsis vertical icon"></i>
             <div class="menu">
+              <a
+                :href="object.fid"
+                v-if="object.domain != $store.getters['instance/domain']"
+                target="_blank"
+                class="basic item">
+                <i class="external icon"></i>
+                <translate :translate-params="{domain: object.domain}" translate-context="Content/*/Button.Label/Verb">View on %{ domain }</translate>
+              </a>
               <div
                 role="button"
                 class="basic item"

front/src/views/channels/DetailBase.vue

@@ -84,6 +84,14 @@
                       <i class="code icon"></i>
                       <translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
                     </a>
+                    <a
+                      :href="object.url"
+                      v-if="object.actor.domain != $store.getters['instance/domain']"
+                      target="_blank"
+                      class="basic item">
+                      <i class="external icon"></i>
+                      <translate :translate-params="{domain: object.actor.domain}" translate-context="Content/*/Button.Label/Verb">View on %{ domain }</translate>
+                    </a>
                     <div class="divider"></div>
                     <a
                       href=""

front/src/views/library/DetailBase.vue

@@ -7,6 +7,14 @@
           <button class="ui pointing dropdown icon small basic right floated button" ref="dropdown" v-dropdown="{direction: 'downward'}" style="position: absolute; right: 1em; top: 1em;">
             <i class="ellipsis vertical icon"></i>
             <div class="menu">
+              <a
+                :href="object.fid"
+                v-if="object.actor.domain != $store.getters['instance/domain']"
+                target="_blank"
+                class="basic item">
+                <i class="external icon"></i>
+                <translate :translate-params="{domain: object.actor.domain}" translate-context="Content/*/Button.Label/Verb">View on %{ domain }</translate>
+              </a>
               <div
                 role="button"
                 class="basic item"