Release 0.4: Progress on a new way to subscribe
Tags: opensource, osd600
Published: 2021-12-06 18:05:55

Last week, I was [planning](https://dev.to/minhhang107/planning-for-a-new-feature-25dp) on implementing a [new feature](https://github.com/FreeTubeApp/FreeTube/issues/1615) for [FreeTube](https://github.com/FreeTubeApp/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](https://dev.to/minhhang107/planning-for-a-new-feature-25dp) 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:
```javascript
showProfileList: function () {
   this.showProfiles = !this.showProfiles
},
```

When the profile list is shown, users can click on any profile and function `subscribe(profile)` ([code](https://github.com/minhhang107/FreeTube/blob/394e550425dbef50afae66789b7d4ffa7fe6eeb6/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js#L54)) 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](https://github.com/minhhang107/FreeTube/tree/add-channel-to-multiple-profiles/src/renderer/components/ft-subscribe-button) 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:
```javascript 
components: {
    'ft-subscribe-button': FtSubscribeButton
},
```
- replacing the existing `Subscribe` button with the new component in the template files and passed any related properties
```html
<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:
![before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s97cgp4z7091pjbe136.jpg)

After:
![after](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrao060svy6ebez4yjcv.png)