Resolve "Following channel with fediverse address not working"

changes/changelog.d/1294.enhancement

@@ -0,0 +1 @@
+Added ability to choose fediverse addresses from channel subscription page/podcast screen (#1294)

changes/changelog.d/1295.bugfix

@@ -0,0 +1 @@
+Fixed an issue where modals would prevent users being able to interact with channels (#1295)

front/src/components/RemoteSearchForm.vue

@@ -1,5 +1,14 @@
 <template>
-  <div>
+  <div v-if="type === 'both' || type === undefined" class="two ui buttons">
+    <button class="ui left floated labeled icon button" @click.prevent="changeType('rss')"><i class="feed icon"></i>
+      <translate translate-context="Content/Search/Input.Label/Noun">RSS</translate>
+    </button>
+    <div class="or"></div>
+    <button class="ui right floated right labeled icon button" @click.prevent="changeType('artists')"><i class="globe icon"></i>
+      <translate translate-context="Content/Search/Input.Label/Noun">Fediverse</translate>
+    </button>
+  </div>
+  <div v-else>
     <form id="remote-search" :class="['ui', {loading: isLoading}, 'form']" @submit.stop.prevent="submit">
       <div v-if="errors.length > 0" role="alert" class="ui negative message">
         <h3 class="header"><translate translate-context="Content/*/Error message.Title">Error while fetching object</translate></h3>
@@ -14,7 +23,7 @@
         <p v-if="type === 'rss'">
           <translate translate-context="Content/Fetch/Paragraph">Paste here the RSS url or the fediverse address to subscribe to its feed.</translate>
         </p>
-        <p v-else>
+        <p v-else-if="type === 'artists'">
           <translate translate-context="Content/Fetch/Paragraph">Use this form to retrieve an object hosted somewhere else in the fediverse.</translate>
         </p>
         <input type="text" name="object-id" id="object-id" :placeholder="labels.fieldPlaceholder" v-model="id" required>
@@ -54,7 +63,7 @@ export default {
       if (this.type === 'rss') {
         this.rssSubscribe()
 
-      } else {
+      } else if (this.type === 'artists') {
         this.createFetch()
       }
     }
@@ -109,6 +118,9 @@ export default {
   },
 
   methods: {
+    changeType(newType) {
+      this.type = newType
+    },
     submit () {
       if (this.type === 'rss') {
         return this.rssSubscribe()

front/src/components/audio/artist/Card.vue

@@ -15,7 +15,8 @@
       <tags-list label-classes="tiny" :truncate-size="20" :limit="2" :show-more="false" :tags="artist.tags"></tags-list>
     </div>
     <div class="extra content">
-      <translate translate-context="*/*/*" :translate-params="{count: artist.tracks_count}" :translate-n="artist.tracks_count" translate-plural="%{ count } tracks">%{ count } track</translate>
+      <translate v-if="artist.content_category === 'music'" translate-context="*/*/*" :translate-params="{count: artist.tracks_count}" :translate-n="artist.tracks_count" translate-plural="%{ count } tracks">%{ count } track</translate>
+      <translate v-else translate-context="*/*/*" :translate-params="{count: artist.tracks_count}" :translate-n="artist.tracks_count" translate-plural="%{ count } episodes">%{ count } episode</translate>      
       <play-button class="right floated basic icon" :dropdown-only="true" :is-playable="artist.is_playable" :dropdown-icon-classes="['ellipsis', 'horizontal', 'large really discrete']" :artist="artist"></play-button>
     </div>
   </div>

front/src/components/library/Podcasts.vue

@@ -94,11 +94,11 @@
         </h2>
         <div class="scrolling content" ref="modalContent">
           <remote-search-form
-            type="rss"
+            type="both"
             :show-submit="false"
             :standalone="false"
             @subscribed="showSubscribeModal = false; fetchData()"
-            :redirect="false"></remote-search-form>
+            :redirect="true"></remote-search-form>
         </div>
         <div class="actions">
           <button class="ui basic deny button">

front/src/components/semantic/Modal.vue

@@ -29,6 +29,7 @@ export default {
     if (this.control) {
       $(this.$el).modal('hide')
     }
+    this.focusTrap.deactivate()
     $(this.$el).remove()
   },
   methods: {

front/src/views/channels/SubscriptionsList.vue

@@ -16,11 +16,11 @@
         </h2>
         <div class="scrolling content" ref="modalContent">
           <remote-search-form
-            type="rss"
+            type="both"
             :show-submit="false"
             :standalone="false"
             @subscribed="showSubscribeModal = false; reloadWidget()"
-            :redirect="false"></remote-search-form>
+            :redirect="true"></remote-search-form>
         </div>
         <div class="actions">
           <button class="ui basic deny button">