Add Tabs to subscriptions page for live streams and shorts #3725

PrestonN · 2023-07-03T21:07:04Z

Add Tabs to subscriptions page for live streams and shorts

Pull Request Type

Bugfix
Feature Implementation
Documentation
Other

Related issue

None IIRC

Description

Adds tabs to the subscriptions page to show live streams and YouTube Shorts along the usual videos. Shorts exclusively use RSS however live streams can be fetched through normal means and via RSS

Screenshots

Testing

Test Fetching via LocalAPI
Test Fetching via RSS
Test Fetching via Invidious
Test Fetching via InvidiousRSS

Desktop

OS: Fedora
OS Version: 37
FreeTube version: v0.18.0 Nightly

efb4f5ff-1298-471a-8973-3d47447115dc · 2023-07-03T21:16:13Z

closes #2852

efb4f5ff-1298-471a-8973-3d47447115dc

Errors i've found

IV-API.mp4

IV-API-RSS.mp4

IV-API-RSS-2.mp4

Local-API.mp4

Local-API-2.mp4

Local-API-RSS.mp4

PikachuEXE

Should be RSS

PikachuEXE · 2023-07-03T23:23:17Z

src/renderer/components/subscriptions-live/subscriptions-live.js

+          case 1:
+            if (process.env.IS_ELECTRON && this.backendFallback) {
+              showToast(this.$t('Falling back to the local API'))
+              return this.getChannelLiveLocal(channel, failedAttempts + 1)


Suggested change

return this.getChannelLiveLocal(channel, failedAttempts + 1)

return this.getChannelLiveLocalRSS(channel, failedAttempts + 1)

PikachuEXE · 2023-07-04T00:56:48Z

src/renderer/components/subscriptions-live/subscriptions-live.js

+        const channelInstance = await getLocalChannel(channel.id)
+
+        if (channelInstance.has_live_streams) {
+          const liveTab = await channelInstance.getLiveStreams()
+
+          if (liveTab.videos === null) {
+            this.errorChannels.push(channel)
+            return []
+          }
+
+          return parseLocalChannelVideos(liveTab.videos, channelInstance.header.author)
+        } else {
+          return []
+        }


Reduce no. of requests by half like video tab (2 => 1 request per channel)

Suggested change

const channelInstance = await getLocalChannel(channel.id)

if (channelInstance.has_live_streams) {

const liveTab = await channelInstance.getLiveStreams()

if (liveTab.videos === null) {

this.errorChannels.push(channel)

return []

}

return parseLocalChannelVideos(liveTab.videos, channelInstance.header.author)

} else {

return []

}

const entries = await getLocalChannelLiveStreams(channel.id)

if (entries === null) {

this.errorChannels.push(channel)

return []

}

return entries

Plus adding following code to src/renderer/helpers/api/local.js

export async function getLocalChannelLiveStreams(id) { const innertube = await createInnertube() try { const response = await innertube.actions.execute(Endpoints.BrowseEndpoint.PATH, Endpoints.BrowseEndpoint.build({ browse_id: id, params: 'EgdzdHJlYW1z8gYECgJ6AA%3D%3D' // protobuf for the live tab (this is the one that YouTube uses, // it has some empty fields in the protobuf but it doesn't work if you remove them) })) const liveStreamsTab = new YT.Channel(null, response) // if the channel doesn't have a live tab, YouTube returns the home tab instead // so we need to check that we got the right tab if (liveStreamsTab.current_tab?.endpoint.metadata.url?.endsWith('/streams')) { return parseLocalChannelVideos(liveStreamsTab.videos, liveStreamsTab.header.author) } else { return [] } } catch (error) { console.error(error) if (error instanceof Utils.ChannelError) { return null } else { throw error } } }

PikachuEXE · 2023-07-04T01:09:37Z

When using Local/Invidious RSS, video tab content overlaps with live tab

Known limitation of RSS Feed?

Update 1: Example channel https://youtube.com/channel/UCLV6l4mzvRQUz5IdOdeP5lw

Video tab

Live tab

ChunkyProgrammer · 2023-07-04T01:26:00Z

src/renderer/components/subscriptions-videos/subscriptions-videos.js

+    },
+
+    getChannelVideosLocalRSS: async function (channel, failedAttempts = 0) {
+      const feedUrl = `https://www.youtube.com/feeds/videos.xml?channel_id=${channel.id}`


We could use the UULF playlist here instead of channel rss (it'll exclude live + shorts).

I'm also wondering if we should include an all tab?(This can be done in a different PR if needed)

All tab with refresh button = easier to get rate limited
No for me :S

I guess the all tab may only work if it uses rss in that case and the all tab should probably be added in a future PR

I agree. It made sense when we didn't need a live tab but now that they're separate we may as well exclude them from the videos section.

I don't know if RSS feed includes all types of videos (videos + live + short)
But I would consider RSS feed as a different type of "stream" and put into another tab / view
That's what I did in my branch of live implementation (but less complete than this PR)

PikachuEXE · 2023-07-04T01:27:25Z

src/renderer/components/subscriptions-live/subscriptions-live.js

+        }
+
+        invidiousAPICall(subscriptionsPayload).then(async (result) => {
+          resolve(await Promise.all(result.videos.map((video) => {


Invidious endpoint for live streams returns non video entries too
Channel tested: https://www.youtube.com/channel/UCnKbs5xffaEzzdKdPZvfhdQ

Suggested change

resolve(await Promise.all(result.videos.map((video) => {

// Sometimes `channel`, 'category' entries are mixed in the result

resolve(await Promise.all(result.videos.filter(e => e.type === 'video').map((video) => {

PikachuEXE · 2023-07-04T01:50:22Z

RSS Feed content overlap fixed
Other change requests fixed

Hmmm what else could be broken :)

PikachuEXE

Better UX

src/renderer/views/Subscriptions/Subscriptions.js

efb4f5ff-1298-471a-8973-3d47447115dc

You're gonna hate me for this request but can u switch the placement of shorts and live?
So shorts in the middle and live to the right.
This way it is consistent with the order of the channel page tabs

efb4f5ff-1298-471a-8973-3d47447115dc · 2023-07-04T07:33:28Z

Not sure if we want to address it here but i mention it anyway.

For the Local API the Upcoming videos Live videos are shown first and then the Upcoming videos. IMO it would make more sense to show the Upcoming first and the the Live videos

Local API + RSS strips the upcoming labels which is expected but the current live videos are not shown on top of the page anymore

Local-API-RSS.mp4

For the IV API the Live and Upcoming labels are stripped from the thumbnails

IV API + RSS shows the same stuff as Local API + RSS

IV-API-RSS.mp4

src/renderer/views/Subscriptions/Subscriptions.js

absidue

There is a lot of code duplication but that could be fixed in a separate pull request later on, as that doesn't make any difference to the functionality provided by this pull request.

static/locales/en-US.yaml

PikachuEXE · 2023-07-06T00:41:33Z

Including this in my own test build (with playlist too)
Will use for a few days and see if there is any noticeable problem

…d instead of mounted

efb4f5ff-1298-471a-8973-3d47447115dc

IMO we should also add the distraction free settings that hides video/shorts/live tab

Create a new header in the distraction free settings called Subscription page with three toggles

absidue · 2023-07-20T17:36:26Z

@efb4f5ff-1298-471a-8973-3d47447115dc Sorry pushed another commit 🙈. Now I'm actually done.

efb4f5ff-1298-471a-8973-3d47447115dc

No worries, LGTM :)

github-actions · 2023-07-20T20:08:48Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

absidue · 2023-07-20T20:13:39Z

This pull requests will keep getting conflicts because people are translating the podcast and release tab strings. Either we speed run the approvals or wait a few weeks until everyone has translated stuff.

efb4f5ff-1298-471a-8973-3d47447115dc · 2023-07-20T20:21:53Z

Speed run lets goooooo

github-actions · 2023-07-20T20:24:55Z

Conflicts have been resolved. A maintainer will review the pull request shortly.

PikachuEXE

Tested new stuff

efb4f5ff-1298-471a-8973-3d47447115dc · 2023-07-21T07:32:40Z

@ChunkyProgrammer pls review ASAP as we dont want to get conflicts because of translating strings

alex-milanov · 2023-10-31T06:35:35Z

Hey guys, have you considered that some people would prefer to see all the video types from their subscriptions in one tab rather than to have to click every time to see if there are updates in the other tabs. Maybe the tabs can act as filters. And/or the behavior can be changed in the settings pane.

The reason is some channels produce more normal videos, other focus on shorts and third mostly live videos. When I open my subscription page I want to see an overview of the updates. I don't want to have to click through every time I check for video updates.

absidue · 2023-10-31T06:38:54Z

@alex-milanov See the discussion here as for why that is not possible without loosing functionality (the tabs don't act as filters, they are completely separate tabs): #4225

alex-milanov · 2023-11-04T16:54:45Z

@alex-milanov See the discussion here as for why that is not possible without loosing functionality (the tabs don't act as filters, they are completely separate tabs): #4225

My comment was ignored in the other topic and it was closed and locked. I was also considering contributing but with this attitude my attention might be well spent elsewhere. Best of luck.

absidue · 2023-11-04T17:11:28Z

Implementing support for every niche use case with a worse UX than the current implementation is not our goal no.

Your cache idea wouldn't work either because there is no way to know if there is a new upload without firing requests off to YouTube, bypassing the cache.

alex-milanov · 2023-11-04T18:52:49Z

Implementing support for every niche use case with a worse UX than the current implementation is not our goal no.

Your cache idea wouldn't work either because there is no way to know if there is a new upload without firing requests off to YouTube, bypassing the cache.

Worse UX is a very subjective statement. The default UX for the feed at least at 0.17.1 had all the video types combined in one feed. Which I guess some users got accustomed to. And I would argue that introducing tabs instead of "type filters" is actually a step in the wrong direction UX wise and this is actually part of what I am engaged in day to day basis.

In any case the previous paragraph is an actual discourse with the goal of solving an issue or coming up with a more usable UI, subjective or not. My main issue was that the discussion was shut down in the other issue that you referred me to. That type of interaction is less that constructive.

MarmadileManteater · 2023-11-04T19:11:01Z

Implementing support for every niche use case with a worse UX than the current implementation is not our goal no.
Your cache idea wouldn't work either because there is no way to know if there is a new upload without firing requests off to YouTube, bypassing the cache.

Worse UX is a very subjective statement. The default UX for the feed at least at 0.17.1 had all the video types combined in one feed. Which I guess some users got accustomed to. And I would argue that introducing tabs instead of "type filters" is actually a step in the wrong direction UX wise and this is actually part of what I am engaged in day to day basis.

In any case the previous paragraph is an actual discourse with the goal of solving an issue or coming up with a more usable UI, subjective or not. My main issue was that the discussion was shut down in the other issue that you referred me to. That type of interaction is less that constructive.

Tabs are a youtube change, not a freetube change. Youtube changed their channel page fundamentally, and so, comparing UI of previous versions of freetube is irrelevant to this problem. Previous versions of freetube expected youtube to work differently than it does now.

The problem is that youtube no longer returns everything as one big feed, and it is important to remember that if you make too many requests, you will get rate-limited, so making extra requests isn't really a viable option.

Even if you go back to 0.17.1 today, you will still only see the videos feed, no shorts, no live, and so, it is extremely unfair to compare the UX of 0.17.1 to 0.19.1 because the difference in UX you are describing is literally a change on YouTube's end, not FreeTube's. Freetube only conformed to the changes made by YouTube.

PrestonN added 3 commits July 3, 2023 16:54

Add Tabs to subscriptions page for live streams and shorts

33d11e7

Fix naming issue with fetching live streams via Invidious RSS

563b1f6

Remove console log

18187f5

FreeTubeBot enabled auto-merge (squash) July 3, 2023 21:07

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Jul 3, 2023

efb4f5ff-1298-471a-8973-3d47447115dc requested review from PikachuEXE, ChunkyProgrammer, absidue and MarmadileManteater July 3, 2023 21:15

efb4f5ff-1298-471a-8973-3d47447115dc reviewed Jul 3, 2023

View reviewed changes

PikachuEXE requested changes Jul 3, 2023

View reviewed changes

PrestonN added 2 commits July 3, 2023 20:24

Better error handling and better live stream sorting

10d149b

Fix linter issues

e66157a

PikachuEXE reviewed Jul 4, 2023

View reviewed changes

ChunkyProgrammer reviewed Jul 4, 2023

View reviewed changes

PikachuEXE requested changes Jul 4, 2023

View reviewed changes

Change videos RSS feed. Make live stream call more efficient.

efe335e

PikachuEXE requested changes Jul 4, 2023

View reviewed changes

src/renderer/views/Subscriptions/Subscriptions.js Show resolved Hide resolved

Store last used tab in memory. Return to last used tab on mount

315d2fb

efb4f5ff-1298-471a-8973-3d47447115dc requested changes Jul 4, 2023

View reviewed changes

PikachuEXE requested changes Jul 4, 2023

View reviewed changes

src/renderer/views/Subscriptions/Subscriptions.js Outdated Show resolved Hide resolved

efb4f5ff-1298-471a-8973-3d47447115dc mentioned this pull request Jul 4, 2023

[Feature Request]: Add dedicated shorts tab #2476

Closed

2 tasks

absidue reviewed Jul 4, 2023

View reviewed changes

static/locales/en-US.yaml Outdated Show resolved Hide resolved

Fix live sorting. Reorganize tabs and check for currentTab via create…

efae20b

…d instead of mounted

efb4f5ff-1298-471a-8973-3d47447115dc reviewed Jul 7, 2023

View reviewed changes

Create shared UI component for the subscription tabs

1699e30

absidue dismissed efb4f5ff-1298-471a-8973-3d47447115dc’s stale review via 1699e30 July 20, 2023 17:34

absidue requested a review from efb4f5ff-1298-471a-8973-3d47447115dc July 20, 2023 17:34

efb4f5ff-1298-471a-8973-3d47447115dc previously approved these changes Jul 20, 2023

View reviewed changes

github-actions bot added PR: merge conflicts / rebase needed and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Jul 20, 2023

Merge branch 'development' into subscription-tabs

a7ec716

absidue dismissed efb4f5ff-1298-471a-8973-3d47447115dc’s stale review via a7ec716 July 20, 2023 20:24

github-actions bot removed the PR: merge conflicts / rebase needed label Jul 20, 2023

efb4f5ff-1298-471a-8973-3d47447115dc approved these changes Jul 20, 2023

View reviewed changes

PikachuEXE approved these changes Jul 21, 2023

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc added the PR: waiting for review For PRs that are complete, tested, and ready for review label Jul 21, 2023

ChunkyProgrammer approved these changes Jul 21, 2023

View reviewed changes

FreeTubeBot merged commit b9eb2a7 into development Jul 21, 2023
6 checks passed

github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Jul 21, 2023

absidue deleted the subscription-tabs branch July 21, 2023 11:35

PikachuEXE mentioned this pull request Jul 27, 2023

Fix outdated subscription cache clearing code when "Remove All Subscriptions / Profiles" performed #3817

Merged

4 tasks

absidue mentioned this pull request Aug 29, 2023

Subscriptions: Add community tab #3973

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Tabs to subscriptions page for live streams and shorts #3725

Add Tabs to subscriptions page for live streams and shorts #3725

PrestonN commented Jul 3, 2023 •

edited

efb4f5ff-1298-471a-8973-3d47447115dc commented Jul 3, 2023

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

PikachuEXE left a comment

PikachuEXE Jul 3, 2023

PikachuEXE Jul 4, 2023

PikachuEXE commented Jul 4, 2023 •

edited

ChunkyProgrammer Jul 4, 2023

PikachuEXE Jul 4, 2023

ChunkyProgrammer Jul 4, 2023 •

edited

PrestonN Jul 4, 2023

PikachuEXE Jul 4, 2023

PikachuEXE Jul 4, 2023

PikachuEXE commented Jul 4, 2023

PikachuEXE left a comment

efb4f5ff-1298-471a-8973-3d47447115dc left a comment •

edited

efb4f5ff-1298-471a-8973-3d47447115dc commented Jul 4, 2023

absidue left a comment

PikachuEXE commented Jul 6, 2023

efb4f5ff-1298-471a-8973-3d47447115dc left a comment •

edited

absidue commented Jul 20, 2023

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

github-actions bot commented Jul 20, 2023

absidue commented Jul 20, 2023

efb4f5ff-1298-471a-8973-3d47447115dc commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

PikachuEXE left a comment

efb4f5ff-1298-471a-8973-3d47447115dc commented Jul 21, 2023

alex-milanov commented Oct 31, 2023 •

edited

absidue commented Oct 31, 2023

alex-milanov commented Nov 4, 2023

absidue commented Nov 4, 2023

alex-milanov commented Nov 4, 2023

MarmadileManteater commented Nov 4, 2023 •

edited

	return this.getChannelLiveLocal(channel, failedAttempts + 1)
	return this.getChannelLiveLocalRSS(channel, failedAttempts + 1)

	resolve(await Promise.all(result.videos.map((video) => {
	// Sometimes `channel`, 'category' entries are mixed in the result
	resolve(await Promise.all(result.videos.filter(e => e.type === 'video').map((video) => {

Add Tabs to subscriptions page for live streams and shorts #3725

Add Tabs to subscriptions page for live streams and shorts #3725

Conversation

PrestonN commented Jul 3, 2023 • edited

Add Tabs to subscriptions page for live streams and shorts

Pull Request Type

Related issue

Description

Screenshots

Testing

Desktop

efb4f5ff-1298-471a-8973-3d47447115dc commented Jul 3, 2023

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

Choose a reason for hiding this comment

PikachuEXE left a comment

Choose a reason for hiding this comment

PikachuEXE Jul 3, 2023

Choose a reason for hiding this comment

PikachuEXE Jul 4, 2023

Choose a reason for hiding this comment

PikachuEXE commented Jul 4, 2023 • edited

ChunkyProgrammer Jul 4, 2023

Choose a reason for hiding this comment

PikachuEXE Jul 4, 2023

Choose a reason for hiding this comment

ChunkyProgrammer Jul 4, 2023 • edited

Choose a reason for hiding this comment

PrestonN Jul 4, 2023

Choose a reason for hiding this comment

PikachuEXE Jul 4, 2023

Choose a reason for hiding this comment

PikachuEXE Jul 4, 2023

Choose a reason for hiding this comment

PikachuEXE commented Jul 4, 2023

PikachuEXE left a comment

Choose a reason for hiding this comment

efb4f5ff-1298-471a-8973-3d47447115dc left a comment • edited

Choose a reason for hiding this comment

efb4f5ff-1298-471a-8973-3d47447115dc commented Jul 4, 2023

absidue left a comment

Choose a reason for hiding this comment

PikachuEXE commented Jul 6, 2023

efb4f5ff-1298-471a-8973-3d47447115dc left a comment • edited

Choose a reason for hiding this comment

absidue commented Jul 20, 2023

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 20, 2023

absidue commented Jul 20, 2023

efb4f5ff-1298-471a-8973-3d47447115dc commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

PikachuEXE left a comment

Choose a reason for hiding this comment

efb4f5ff-1298-471a-8973-3d47447115dc commented Jul 21, 2023

alex-milanov commented Oct 31, 2023 • edited

absidue commented Oct 31, 2023

alex-milanov commented Nov 4, 2023

absidue commented Nov 4, 2023

alex-milanov commented Nov 4, 2023

MarmadileManteater commented Nov 4, 2023 • edited

PrestonN commented Jul 3, 2023 •

edited

PikachuEXE commented Jul 4, 2023 •

edited

ChunkyProgrammer Jul 4, 2023 •

edited

efb4f5ff-1298-471a-8973-3d47447115dc left a comment •

edited

efb4f5ff-1298-471a-8973-3d47447115dc left a comment •

edited

alex-milanov commented Oct 31, 2023 •

edited

MarmadileManteater commented Nov 4, 2023 •

edited