added support for choosing channel usernames or IDs

also added hints so finding those identifiers on YouTube is easier

src/components/FeedDialog.vue

@@ -10,18 +10,28 @@
 
     <v-card>
       <v-card-title
-        class="headline grey lighten-2"
+        class="headline"
         primary-title
       >
         Add Channel Feed
       </v-card-title>
 
       <v-card-text>
+        <v-radio-group
+          v-model="feedType"
+          row
+          >
+          <v-radio value="channel_id" label="Channel ID"></v-radio>
+          <v-radio value="user" label="Username"></v-radio>
+        </v-radio-group>
         <v-text-field
+          class="pt-0"
           v-model="channelId"
-          prefix="https://youtube.com/channel/"
-          placeholder="YouTube channel ID"
+          :prefix="feedPrefix[feedType]"
+          :placeholder="feedPlaceholder[feedType]"
           ref="channel"
+          persistent-hint
+          :hint="feedHint[feedType]"
         />
       </v-card-text>
 
@@ -47,12 +57,29 @@ export default {
   name: 'FeedDialog',
   data: () => ({
     dialog: false,
+    feedType: 'channel_id',
     channelId: '',
+    feedPrefix: {
+      channel_id: 'https://youtube.com/channel/',
+      user: 'https://youtube.com/user/',
+    },
+    feedHint: {
+      channel_id: 'You can get the channel ID from a YouTube video page. The link on the username includes it.',
+      user: 'This is the general format for URLs of YouTube channels. You can also get the username from the link on the avatar of a video uploader.',
+    },
+    feedPlaceholder: {
+      channel_id: 'YouTube channel ID',
+      user: 'YouTube channel username',
+    },
   }),
   methods: {
     feedSubmit() {
       if (this.channelId) {
-        this.$emit('feedSubmitted', this.channelId);
+        this.$emit('feedSubmitted', {
+          type: this.feedType,
+          value: this.channelId,
+        });
+
         this.dialog = false;
         this.channelId = '';
       }

src/modules/feed.js

@@ -1,5 +1,5 @@
 import * as xml2js from 'xml2js';
 
-export default function loadFeed(corsProxyUrl, channelID) {
-  return fetch(`${corsProxyUrl}https://www.youtube.com/feeds/videos.xml?channel_id=${channelID}`).then((response) => response.text()).then((xml) => xml2js.parseStringPromise(xml)).then((result) => result.feed);
+export default function loadFeed(corsProxyUrl, channelID, type = 'channel_id') {
+  return fetch(`${corsProxyUrl}https://www.youtube.com/feeds/videos.xml?${type}=${channelID}`).then((response) => response.text()).then((xml) => xml2js.parseStringPromise(xml)).then((result) => result.feed);
 }

src/store/actions.js

@@ -113,9 +113,9 @@ export default {
     commit(types.UPDATE_SEARCH_INDEX, fuse(state.videos));
   },
 
-  async getFeed({ commit, dispatch, state }, channelID) {
+  async getFeed({ commit, dispatch, state }, payload) {
     commit(types.SET_LOADING, true);
-    const feed = await loadFeed(state.config.corsProxyUrl, channelID);
+    const feed = await loadFeed(state.config.corsProxyUrl, payload.value, payload.type);
     commit(types.SET_LOADING, false);
 
     dispatch('addChannel', feed);