Subscriptions not all showing and scrolling does not show more

[KaiSforza]

Description

Depending on the height of the window it will show 2 (~720px) or 5 (~1440px) subscriptions. There is no show more at the bottom, or any way to show more than that many subscriptions.

Expected / Actual behavior

Either load all of the subscriptions or have a way to show more than is initially loaded.

Reproduction steps

1. Open *-twitch-gui (works in both livestreamer- and streamlink-twitch-gui)
2. Log in if you are not already
3. Make the window as small as possible
4. Open the 'My Subscriptions' page
5. Scroll to the bottom and see that you cannot see more than 2 subscriptions (if you have more)
6. Make the window larger (maximize, preferably)
7. Refresh page
8. See more subscriptions, but still not all of your subscriptions if you have more than 5 or 6.

Environment details (operating system, etc.)

Windows and Linux

• Windows: 2560x1440 screen, no scaling.
• Linux: 3200x1800 screen, 1.5x scaling.

Comments, logs, screenshots, etc.

It seems like the number of subscribers shown is dictated by the size of the window.

Screenshots were taken in Linux.

Maximized window

Smallest possible window

[bastimeyer]

Hm, I'm unable to reproduce this. Could you please help me debugging this? Sorry for the wall of text, I hope it's not too much... Thank you!

The UserSubscriptionsRoute behaves exactly the same as all other routes using the infinite scroll mechanism.

Let me quickly explain how it works:
All of the routes using the InfiniteScrollMixin set offset and limit parameters in each Twitch API request. These are being calculated in a way so that all of the available space gets filled with a single request (if possible). The available space calculation is based on CSS rules and CSS media queries that define a minimum height and dynamic width of the list's items.
A hasFetchedAll property is set initially and after each request while scrolling, which enables/disables additional requests and shows/hides the "Fetch more" button. This property is set to true if the number of returned records is smaller than the requested limit, which means that Twitch doesn't have any more records available. This behavior has been explicitly chosen instead of using API response metadata, because the Twitch API is inconsistent and metadata is not always available.

The reason why I'm explaining all this is that I have a feeling that this calculation doesn't work correcly when using interface scaling on higher DPI screens.

I'd like to know the offset and limit parameters of each request while using different window sizes.
Maybe also the value of the columns and rows variables here.

Unfortunately, the new releases don't include the dev tools anymore, which means that you need to build the application on your own to be able to access the dev tools. See here:
https://github.com/streamlink/streamlink-twitch-gui/blob/v1.0.0/CONTRIBUTING.md#developing-and-building

If you need any help with reading network requests or setting breakpoints, just let me know.

[KaiSforza]

It's setting the limit to 3 or 7, depending on whether I maximize or make it smaller, offset is always 0. There is a scroll event recorded, i see, and then a dispatch to fetch more content, but...nothing happens.

Now I don't really have any idea how to debug JS stuff, but it seems to get to this function on lines 99-103 in InfiniteScrollComponent.js:

		let listener  = function() {
			if ( this.infiniteScroll( parent, threshold ) ) {
				action( false );
			}
		}.bind( this );

and then...it does nothing. I have tried scrolling multiple times scrolling, no luck.

[bastimeyer]

It's setting the limit to 3 or 7

This means that there's no error in the size calculation.

offset is always 0

This is correct for the first request. All additional requests should be greater than 0 (number of already loaded records to be precise).
I'm assuming you're talking about the request parameters after inspecting this in the network tab of the dev tools. There's also the offset property I have mentioned, which is just a binding to the content length.

but it seems to get to this function

The event listener will be registered by the button component (at the bottom of a infinite scroll list), which is also responsible for all DOM events due to the current nature of EmberJS routes. As soon as hasFetchedAll is being set to true in the route object (logic injected by InfiniteScrollMixin), this listener will be unregistered and the button will be hidden. The component's behavior should be correct and not of interest here.

I don't really have any idea how to debug JS stuff

No problem. Just go to the "Sources" tab and navigate to the file you'd like to inspect, then set a breakpoint by clicking a line number. The execution will stop as soon as it reaches this line. The call stack and scope can be seen on the right, above the listed breakpoints. Execution control buttons are on the top (continue, step over/in/out, etc.). The console can also be used by pressing esc.

Just set a breakpoint here
https://github.com/streamlink/streamlink-twitch-gui/blob/v1.0.0/src/app/mixins/InfiniteScrollMixin.js#L161
and tell me the value of offset and limit. If the offset (binding to the current content length) is not smaller than the limit, more requests will be made.

Also please set a breakpoint here
https://github.com/streamlink/streamlink-twitch-gui/blob/v1.0.0/src/app/mixins/InfiniteScrollMixin.js#L206
and see the data variable or data.length property.

Thanks

[KaiSforza]

At line 161, at the first execution, the limit is at 3, as expected. There is no offset. However, the weird thing is that the length is set to 2. It always seems to be less than the limit. I don't know if this has something to do with twitch prime subs, one of my old subscriptions to a channel that no longer exists, or anything else weird, though.

It shows my twitch prime subscription twice, and one of the channels that I am 'subscribed' to no longer exists, but I still have emotes and it shows up in my subscriptions page on the twitch website.

It never stops at line 206.

[bastimeyer]

There is no offset

Sorry, the name of the local var is length. The property on the route is called offset.

the weird thing is that the length is set to 2

This doesn't make sense if you have more than 2 subscriptions and the requested offset was 0 (which is the case for the first request).

It never stops at line 206.

Because no additional requests are being made.

I don't know if this has something to do with twitch prime subs

I'd not be surprised if this is the case. The subscriptions are part of the private API, so there might be something that has changed that I don't know of. I don't have Amazon Prime and thus no prime subscriptions right now. Are there any errors in the console log? This should be the case if the models/serializers don't match the data of the request.

Please check the data of the first request, so we can be sure that this isn't a Twitch API issue. The length of the tickets array should be equal to the limit if you have more subscriptions.

[KaiSforza]

So just running the curl command, and when I put in an offset of 2, it gets me two of my subs (well, one, but duplicates because of twitch prime, I think, since they're overlapping right now). That makes sense, those are my two newest subscriptions.

If I put in 5, the length of the tickets list is 5. However, there is a duplicate (two OHN subscriptions) and an odd one out, twitch prime:

            "id": 12345,
            "access_start": null,
            "access_end": "DATE",
            "expired": false,
            "purchase_profile": {
                "refundable": false,
                "will_renew": false,
                "paid_on": "DATE",
                "expired": false,
                "payment_provider": "samus",
                "consecutive_months": MONTHS
            },
            "product": {
                "name": "Twitch Prime",
                "short_name": "twitch_prime",
                "ticket_type": "turbo",
                "owner_name": null,
                "features": {
                    "bitrate_access": []
                },
                "interval_number": 1,
                "recurring": false,
                "partner_login": null,
                "price": "$8.99",
                "period": "Year",
                "emoticons": []
            }

Note, the partner_login is null, and not a channel name, so I don't think the way subs are displayed works for that. Something seems to be wrong with the length, or it's not actually using the tickets response, since I see 0-6 when my limit is set to 7.

[KaiSforza]

It looks like it's pulling the length from content.model.length, which is not set directly from the result of the tickets list. Where is that set? I'm guessing that it's set after the processing happens to get the information in the ticket list, and twitch prime doesn't show anything. And when I pull in 7, the 7th entry is for twitch turbo, so that's why it's only showing 5 as the length there...

[bastimeyer]

It's reading it from controller.model.length, which is set by Ember's model hook on the route. The response is being parsed and records created by EmberData, based on the definition of the models and serializers.

Could you please post the whole body of the API reponse when requesting all subscriptions at once, so I can see and analyse it? Only the headers contain sensitive data, but if you don't want to post it here, you can send me an email instead. The address is listed on my github profile. Thank you very much.

[KaiSforza]

{
    "tickets": [
        {
            "id": 13326310,
            "access_start": null,
            "access_end": "2017-01-10T09:28:33Z",
            "expired": false,
            "purchase_profile": {
                "refundable": false,
                "will_renew": false,
                "paid_on": "2016-12-07T09:28:33Z",
                "expired": false,
                "payment_provider": "samus",
                "consecutive_months": 2
            },
            "product": {
                "name": "Channel Subscription (OHN)",
                "short_name": "uknighted",
                "ticket_type": "chansub",
                "owner_name": "outerheaven",
                "features": {
                    "bitrate_access": []
                },
                "interval_number": 1,
                "recurring": true,
                "partner_login": "outerheaven",
                "price": "$4.99",
                "period": "Month",
                "emoticons": ["redacted to make this not 10 pages long"]
            }
        },
        {
            "id": 12365650,
            "access_start": null,
            "access_end": "2016-12-09T16:52:04Z",
            "expired": false,
            "purchase_profile": {
                "refundable": false,
                "will_renew": false,
                "paid_on": "2016-11-06T16:52:04Z",
                "expired": true,
                "payment_provider": "samus",
                "consecutive_months": 2
            },
            "product": {
                "name": "Channel Subscription (OHN)",
                "short_name": "uknighted",
                "ticket_type": "chansub",
                "owner_name": "outerheaven",
                "features": {
                    "bitrate_access": []
                },
                "interval_number": 1,
                "recurring": true,
                "partner_login": "outerheaven",
                "price": "$4.99",
                "period": "Month",
                "emoticons": ["redacted to make this not 10 pages long"]
            }
        },
        {
            "id": 10239995,
            "access_start": null,
            "access_end": "2017-11-01T00:00:00Z",
            "expired": false,
            "purchase_profile": {
                "refundable": false,
                "will_renew": false,
                "paid_on": "2016-10-01T06:48:02Z",
                "expired": false,
                "payment_provider": "samus",
                "consecutive_months": 13
            },
            "product": {
                "name": "Twitch Prime",
                "short_name": "twitch_prime",
                "ticket_type": "turbo",
                "owner_name": null,
                "features": {
                    "bitrate_access": []
                },
                "interval_number": 1,
                "recurring": false,
                "partner_login": null,
                "price": "$8.99",
                "period": "Year",
                "emoticons": []
            }
        }
    ]
}

[KaiSforza]

Just an example of the emote list element, in case that matters:

                    {
                        "regex_display": null,
                        "state": "active",
                        "url": "https://static-cdn.jtvnw.net/jtv_user_pictures/emoticon-11709-src-b82ca494d1fe0923-28x28.png",
                        "regex": "ohnFiddle"
                    }

[bastimeyer]

Was this a offset=0 and limit=7 request?
This JSON payload is also not different from the expected one.

[KaiSforza]

Fixed by ebac2ec .