Release 0.4: Progress on a new way to subscribe

Last week, I was planning on implementing a new feature for FreeTube and have been working on it for the whole week.

I first commented on the issue to let the maintainers know that I would like to take on the issue. After a few days without response from them, I had to reach out to them through their private channel and got their approval. Then I went on to work as planned in previous blog post and was able to finish all the tasks.

After some testing, I realized that combining the new feature with the existing functionality of Subscribe button can be confusing since the button also has to handle unsubscribe functionality. Therefore I decided to add a separate button just to handle the new feature. I mentioned this approach to the maintainers and they agreed with that.

With this new approach, the Subscribe button is kept separately without any changes. The plus button is implemented as a toggle to show and hide the profile list. Clicking this button will trigger a simple function showProfileList() to change the showProfiles property:

showProfileList: function () {
   this.showProfiles = !this.showProfiles
},

When the profile list is shown, users can click on any profile and function subscribe(profile) (code) will be triggered to directly add the subscription to the target profile without switching.

Another thing I found was that the feature can also be added to the Channel page so I suggested creating a component for the two buttons and added it to both Video page and Channel page.

To do this, I had to first create a new component including:

• ft-subscribe-button.js file that contains the logic of the component
• ft-subscribe-button.vue file that is responsible for the template of the component
• ft-subscribe-button.sass file that has all the styling for the component

After that, I added the component to the Video page and Channel page by

• including the component in the components property of the logic files:

components: {
    'ft-subscribe-button': FtSubscribeButton
},

• replacing the existing Subscribe button with the new component in the template files and passed any related properties

<ft-subscribe-button
  :channel-id="channelId"
  :channel-name="channelName"
  :channel-thumbnail="channelThumbnail"
  :is-subscribed="isSubscribed"
  :subscribed-text="subscribedText"
/>

I have finished the implementation for all these ideas and in the remaining week, I will be sending the PR, waiting for the maintainers' review and work with them to finalize the new feature.

Before:

After: