init

src/renderer/components/side-nav/side-nav.vue

@@ -32,6 +32,30 @@
           {{ $t("Subscriptions.Subscriptions") }}
         </p>
       </div>
+      <div
+        class="navOption mobileShow"
+        role="button"
+        tabindex="0"
+        :title="$t('Channels.Channels')"
+        @click="navigate('subscribedchannels')"
+      >
+        <div
+          class="thumbnailContainer"
+        >
+          <font-awesome-icon
+            icon="list"
+            class="navIcon"
+            :class="applyNavIconExpand"
+            fixed-width
+          />
+        </div>
+        <p
+          v-if="!hideText"
+          class="navLabel"
+        >
+          {{ $t('Channels.Channels') }}
+        </p>
+      </div>
       <div
         v-if="!hideTrendingVideos"
         class="navOption mobileHidden"

src/renderer/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Subscriptions from '../views/Subscriptions/Subscriptions.vue'
+import SubscribedChannels from '../views/SubscribedChannels/SubscribedChannels.vue'
 import ProfileSettings from '../views/ProfileSettings/ProfileSettings.vue'
 import ProfileEdit from '../views/ProfileEdit/ProfileEdit.vue'
 import Trending from '../views/Trending/Trending.vue'
@@ -34,6 +35,14 @@ const router = new Router({
       },
       component: Subscriptions
     },
+    {
+      path: '/subscribedchannels',
+      meta: {
+        title: 'Channels.Title',
+        icon: 'fa-home'
+      },
+      component: SubscribedChannels
+    },
     {
       path: '/settings/profile',
       meta: {

src/renderer/views/SubscribedChannels/SubscribedChannels.css

@@ -0,0 +1,79 @@
+.card {
+  width: 85%;
+  margin: 0 auto;
+  margin-bottom: 60px;
+}
+
+.message {
+  color: var(--tertiary-text-color);
+}
+
+.count {
+  margin-top: 1rem;
+}
+
+.channels {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) );
+  gap: 2.5rem;
+  margin-top: 2rem;
+}
+
+.channel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 0.75rem;
+  padding: 0.5rem;
+}
+
+.thumbnailContainer {
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+}
+
+.channelThumbnail {
+  height: 120px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.channelName {
+  flex-grow: 1;
+  cursor: pointer;
+  font-size: 1.1rem;
+  text-decoration: none;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  padding: 0 4px;
+}
+
+.buttonContainer {
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+}
+
+.btn {
+  padding: 5px 10px;
+}
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+
+  .channels {
+    gap: 1.5rem;
+  }
+
+  .channelThumbnail {
+    height: 80px;
+  }
+}

src/renderer/views/SubscribedChannels/SubscribedChannels.js

@@ -0,0 +1,125 @@
+import Vue from 'vue'
+import { mapActions } from 'vuex'
+import FtButton from '../../components/ft-button/ft-button.vue'
+import FtCard from '../../components/ft-card/ft-card.vue'
+import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
+import FtInput from '../../components/ft-input/ft-input.vue'
+
+export default Vue.extend({
+  name: 'SubscribedChannels',
+  components: {
+    'ft-button': FtButton,
+    'ft-card': FtCard,
+    'ft-flex-box': FtFlexBox,
+    'ft-input': FtInput
+  },
+  data: function () {
+    return {
+      hasQuery: false,
+      allChannels: [],
+      filteredChannels: [],
+      reURL: /(.+=\w{1})\d+(.+)/,
+      thumbnailSize: 176
+    }
+  },
+  computed: {
+    activeProfile: function () {
+      return this.$store.getters.getActiveProfile
+    },
+
+    activeProfileId: function () {
+      return this.activeProfile._id
+    },
+
+    activeSubscriptionList: function () {
+      return this.activeProfile.subscriptions
+    },
+
+    channelsList: function () {
+      if (this.hasQuery) {
+        return this.filteredChannels
+      } else {
+        return this.allChannels
+      }
+    },
+
+    locale: function () {
+      return this.$store.getters.getCurrentLocale.replace('_', '-')
+    }
+  },
+  watch: {
+    activeProfileId: function() {
+      this.clearFilter()
+      this.getAllChannels()
+    }
+  },
+  mounted: function () {
+    this.getAllChannels()
+  },
+  methods: {
+    getAllChannels: function () {
+      this.allChannels = this.activeSubscriptionList.slice().sort((a, b) => {
+        return a.name.localeCompare(b.name, this.locale)
+      })
+    },
+
+    filterChannels: function (query) {
+      this.hasQuery = query !== ''
+
+      if (query === '') {
+        this.filteredChannels = []
+        return
+      }
+
+      const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      const re = new RegExp(escapedQuery, 'i')
+      this.filteredChannels = this.allChannels.filter(channel => {
+        return re.test(channel.name)
+      })
+    },
+
+    clearFilter: function () {
+      this.$refs.searchBarChannels.inputData = ''
+      this.hasQuery = false
+    },
+
+    unsubscribeChannel: function (id, name) {
+      const currentProfile = JSON.parse(JSON.stringify(this.activeProfile))
+      let index = currentProfile.subscriptions.findIndex(channel => {
+        return channel.id === id
+      })
+      currentProfile.subscriptions.splice(index, 1)
+
+      this.updateProfile(currentProfile)
+      this.showToast({
+        message: this.$t('Channels.Unsubscribed').replace('$', name)
+      })
+
+      index = this.allChannels.findIndex(channel => {
+        return channel.id === id
+      })
+      this.allChannels.splice(index, 1)
+
+      index = this.filteredChannels.findIndex(channel => {
+        return channel.id === id
+      })
+      if (index !== -1) {
+        this.filteredChannels.splice(index, 1)
+      }
+    },
+
+    thumbnailURL: function(originalURL) {
+      // Saved thumbnail quality is inconsistent (48, 76, 100 or 176)
+      return originalURL.replace(this.reURL, `$1${this.thumbnailSize}$2`)
+    },
+
+    goToChannel: function (id) {
+      this.$router.push({ path: `/channel/${id}` })
+    },
+
+    ...mapActions([
+      'showToast',
+      'updateProfile'
+    ])
+  }
+})

src/renderer/views/SubscribedChannels/SubscribedChannels.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <ft-card class="card">
+      <h3>{{ $t('Channels.Title') }}</h3>
+      <ft-input
+        ref="searchBarChannels"
+        :placeholder="$t('Channels.Search bar placeholder')"
+        :show-clear-text-button="true"
+        :show-action-button="false"
+        :spellcheck="false"
+        @input="filterChannels"
+      />
+      <ft-flex-box
+        v-if="activeSubscriptionList.length === 0"
+      >
+        <p class="message">
+          {{ $t('Channels.Empty') }}
+        </p>
+      </ft-flex-box>
+      <template v-else>
+        <ft-flex-box class="count">
+          {{ $t('Channels.Count').replace('$', channelsList.length) }}
+        </ft-flex-box>
+        <ft-flex-box class="channels">
+          <div
+            v-for="channel in channelsList"
+            :key="channel.key"
+            class="channel"
+          >
+            <div class="thumbnailContainer">
+              <img
+                class="channelThumbnail"
+                :src="thumbnailURL(channel.thumbnail)"
+                @click="goToChannel(channel.id)"
+              >
+            </div>
+            <div
+              class="channelName"
+              :title="channel.name"
+              @click="goToChannel(channel.id)"
+            >
+              {{ channel.name }}
+            </div>
+            <div class="buttonContainer">
+              <ft-button
+                :label="$t('Channels.Unsubscribe')"
+                background-color="var(--search-bar-color)"
+                text-color="var(--secondary-text-color)"
+                @click="unsubscribeChannel(channel.id, channel.name)"
+              />
+            </div>
+          </div>
+        </ft-flex-box>
+      </template>
+    </ft-card>
+  </div>
+</template>
+
+<script src="./SubscribedChannels.js" />
+<style scoped src="./SubscribedChannels.css" />

static/locales/en-US.yaml

@@ -87,6 +87,14 @@ Subscriptions:
   Refresh Subscriptions: Refresh Subscriptions
   Load More Videos: Load More Videos
 More: More
+Channels:
+  Channels: Channels
+  Title: Channel List
+  Search bar placeholder: Search Channels
+  Count: $ channel(s) found.
+  Empty: Your channel list is currently empty.
+  Unsubscribe: Unsubscribe
+  Unsubscribed: $ has been removed from your subscriptions
 Trending:
   Trending: Trending
   Default: Default