Channel times displayed (Guide)

[techywarrior 689]

haha, yea. That's a pretty big improvement.

 

I am very very close to having this other part done. Only thing left is when you change the date and then go back to "today" it doesn't start at the correct time.

 

Here is how it will look (this was taken at 10:15am local time)

[krustyreturns 191]

Looking really good guys.  Thanks for doing this.

[techywarrior 689]

Alrighty, I think I have it all sorted. Give this version a test and let me know if you see any issues (especially with how the current day starts at the exact minute that the page is loaded)

 

Sven, the border on blank cells should be fixed as well so channels with no guide data should just be blank all the way across now.

tvguide.zip

[Sven 136]

[techywarrior 689]

I can't test that until late at night but isn't that basically what it did before at the end of the day? I'm not sure if there is going to be a real fix for that because if the shows around midnight all start at different times how long should we extend it for?

 

Real TV guides don't have that problem because they roll into the next day but the way this TV guide is setup that doesn't happen. It may just be a limitation we need to live with for right now (unless someone has a good idea).

 

As long as everything else about the guide is behaving well then I think this update is a huge step forward in the display of the TV guide.

[Sven 136]

I can't test that until late at night but isn't that basically what it did before at the end of the day? I'm not sure if there is going to be a real fix for that because if the shows around midnight all start at different times how long should we extend it for?

 

Real TV guides don't have that problem because they roll into the next day but the way this TV guide is setup that doesn't happen. It may just be a limitation we need to live with for right now (unless someone has a good idea).

 

As long as everything else about the guide is behaving well then I think this update is a huge step forward in the display of the TV guide.

 

Oh yeah indeed. Before it was also like this ....

Maybe we need to build an EPG that just goes further like you mentioned...

[techywarrior 689]

Oh yeah indeed. Before it was also like this ....

Maybe we need to build an EPG that just goes further like you mentioned...

That can be stage 2

 

Doing something like that may be much more involved because it wouldn't be practical to load the entire week at once and if we don't do that there would need to be AJAX loading of additional hours as you scrolled.

[KarterJK 35]

ah, stupid me now I understand your reference/difference between web client and local use

 

I did test and it looks good, obviously the web client is unchanged

 

but here is how things looked on my end under local use

a great improvement,  thank you.  This is sweet.

 

here were a couple of the things I did notice

 

1.  didn't the current days date used to show here?  I will have to switch it back to original to see.

2.  mine was only 1 minute from changing, so there was a very thin slot, but still visible

3. & 4. I didn't quite understand these, it was the same program on each, in the very slim time slot.  The beginning/ending times didn't really match up.

 

 

wow,

again great job, thank you

 

I do have a question;

 

why not let it scroll horizontally for the entire week, and only when the day changes let that show where the 1. is indicated?

...that is how it is set up in media center. It seems it would be easier to navigate, especially for the late nighter's, going from 11;00pm to 12:00am.

I would think it would be easier programming wise, but maybe not. 

Edited February 6, 2015 by KarterJK

[techywarrior 689]

1. I don't think so but I don't remember for sure.

2. Not sure if you are happy or saying there is an issue. It's working as intended as far as I am concerned. It may be worth not displaying the time if there is less then x minutes left in the block but it also may not be worth it.

3/4. Working perfectly. The problem appears to be with your guide data.

 

Please keep testing and let me know if you find anything. I submitted a pull request so hopefully the new guide makes it into the next release cycle. I'm pretty happy with it. At least it looks like a real TV guide now.

 

I was thinking about doing some more but I just got a large project that I need to work on so I may put that off till after this project.

[Sven 136]

1. I don't think so but I don't remember for sure.

2. Not sure if you are happy or saying there is an issue. It's working as intended as far as I am concerned. It may be worth not displaying the time if there is less then x minutes left in the block but it also may not be worth it.

3/4. Working perfectly. The problem appears to be with your guide data.

 

Please keep testing and let me know if you find anything. I submitted a pull request so hopefully the new guide makes it into the next release cycle. I'm pretty happy with it. At least it looks like a real TV guide now.

 

I was thinking about doing some more but I just got a large project that I need to work on so I may put that off till after this project.

 

Fine tuning can indeed be done at a later stadium. It's already a great improvement now...

[KarterJK 35]

1. I don't think so but I don't remember for sure.

2. Not sure if you are happy or saying there is an issue. It's working as intended as far as I am concerned. It may be worth not displaying the time if there is less then x minutes left in the block but it also may not be worth it.

3/4. Working perfectly. The problem appears to be with your guide data.

 

Please keep testing and let me know if you find anything. I submitted a pull request so hopefully the new guide makes it into the next release cycle. I'm pretty happy with it. At least it looks like a real TV guide now.

 

I was thinking about doing some more but I just got a large project that I need to work on so I may put that off till after this project.

No, no... I am completely happy with it, and I think others will be to, and I agree is does look more like a real guide now.

 

My comments were meant to be nothing more than mere observations, not anything derogatory, if I offended I apologize, it was not my intent.

 

My mentioning the slim containers was only in comparison to media center, where I think they must have a minimum field size length, and the date I must have been thinking of media center also.

 

 

Again thank you.

Edited February 6, 2015 by KarterJK

[techywarrior 689]

No offense taken. I just wasn't sure if you were trying to point out something or not.

 

I guess I should have looked at my WMC guide first. It certainly would have been easier to keep the first a fixed width and just display the time as current time

 

I think for now though I am going to leave it the way I have it because there are going to be minor issues with shows that ended within that initial 30 minute block showing up again (similar to how it was before anyways) because we are a little more restricted in how the HTML must be constructed then a custom program like WMC.

[KarterJK 35]

Ditto

[TedA 36]

So I've been playing with guide rendering recently, and am very interested in @@techywarrior 's comment about performance.

 

The current guide rendering essentially creates the grid, and then for each cell in the grid finds the program that fits in that cell.

 

That didn't really work for what I wanted to do, so I took a different approach.

 

Instead of creating the grid and then iterating through the cells to find the matching program (which, as you mentioned, could go up to 1,440 cells per channel!) I instead set a width per minute (I went with 6 pixels) and then generated the container as a relatively positioned element with a fixed width and height. Once that was created I was able to iterate through the programs and calculate their location based on their start/end dates, and just positioned them absolutely where they were supposed to go.

 

This seems more efficient as you are iterating through the programs, instead of iterating through every minute of the day once per channel.

 

This is very ugly dev code, but to see what I'm talking about:

function getMinuteDiff(start, end) {
    return Math.floor((end - start) / 60000);
}

var guideMinutes = getMinuteDiff(startDate, endDate);

var rowHeight = 46,
    minWidth = 6;

function getTimePos(date) {
    return (Math.max(0, getMinuteDiff(startDate, Math.min(date, new Date(endDate.getTime() + 30 * 60 * 1000))))) * minWidth;
}

var html = '';

html += '<div class="videoGuideContainer" style="overflow:auto;width:100%;height:' + (4.5 * rowHeight) + 'px;">';
html += '<div class="videoGuide" style="margin-top:' + (rowHeight / 2) + 'px;margin-left:' + (30 * minWidth) + 'px;position:relative;height:' + (channels.length * rowHeight) + 'px;width:' + ((guideMinutes + 30) * minWidth) + 'px;">';

for (var t = new Date(startDate.getTime()) ; t <= endDate; t.setTime(t.getTime() + (30 * 60 * 1000))) {
    html += '<div style="box-sizing:border-box;border:1px solid #ccc;border-bottom:0;border-right:0;position:absolute;bottom:100%;left:' + getTimePos(t) + 'px;width:' + (30 * minWidth) + 'px;line-height:' + (rowHeight / 2 - 1) + 'px;padding-left:6px;">' + LiveTvHelpers.getDisplayTime(t) + '</div>';
}

html += channels.map(function (c, i, a) {
    var channelId = c.Id;
    var channelHtml = '';

    channelHtml += '<div data-channel-id="' + channelId + '" class="guideChannel" style="cursor:pointer;box-sizing:border-box;position:absolute;top:' + (i * rowHeight) + 'px;right:100%;height:' + rowHeight + 'px;width:' + (minWidth * 30) + 'px;border-top:1px solid #ccc;padding:6px;">' + c.Name + '<br />' + c.Number + '</div>';

    channelHtml += programs.filter(function (p) {
        return p.ChannelId === channelId
    }).map(function (p) {
        var startPos = getTimePos(new Date(p.StartDate));
        var endPos = getTimePos(new Date(p.EndDate));

        var sD = new Date(p.StartDate);
        var eD = new Date(p.EndDate);
        console.log(sD.getHours() + ':' + sD.getMinutes() + ' - ' + eD.getHours() + ':' + eD.getMinutes());

        return '<div data-channel-id="' + channelId + '" class="guideChannel" style="cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;position:absolute;top:' + (i * rowHeight) + 'px;left:' + startPos + 'px;height:' + rowHeight + 'px;width:' + (endPos - startPos) + 'px;border:1px solid #ccc;border-right:0;border-bottom:0;padding:6px;">' + p.Name + '<br />' + LiveTvHelpers.getDisplayTime(new Date(p.StartDate)) + ' - ' + LiveTvHelpers.getDisplayTime(new Date(p.EndDate)) + '</div>';
    }).join('');

    return channelHtml;
}).join('');

html += '</div>'; // .videoGuide
html += '</div>'; // .videoPlayerPopupScroller

return html;

(Again, really ugly written late at night code that will be refactored once everything works)

 

Would probably be even more efficient to just store each channels index in an object with channelId's keys so you could easily get it for the program rendering without having to filter once per channel...

 

This gives me the guide I want, accurate to the minute (Ignore the alignment issue with the time labels up top. Working on that tonight):

 

Just curious on your thoughts whether this might be a more performant approach than the current.

[techywarrior 689]

I like the idea. I just took what already existed and quickly fixed it. I submitted the Git pull request 3 weeks ago in the hope that it would get merged since at minimum it's a big upgrade to the existing guide. Once it was in dev/beta I could play around and see if there even was a noticeable performance problem before rewriting the entire guide. But it's still hasn't been pulled so I'm not going to bother looking into it until it is.

[andrew.busche 1]

This is also an issue with the Roku guide.. how would we go about getting that fixed? is this known?

[techywarrior 689]

Not sure, but it's been a month and the guide change still hasn't been merged into the server and there has been no feedback from the core devs so I'm not going to do any more work on it at this point.

[techywarrior 689]

I've reworked the code a bit because someone said it took 20 seconds to load on a smartphone (ouch). I knew the way I had built it wasn't super efficient but I thought it would work in the short term.

 

Since my TV channels are so limited I need additional people to test it. Especially @@Sven because you have some blank channels and other oddities.

 

It should look exactly the same as my previous version but be much much faster.

livetvguide.zip

[TedA 36]

Down to 1 second for me! Great work on this @@techywarrior

 

As someone that chose MediaBrowser over Plex specifically for the live TV functionality, I'm very excited for these improvements to hit dev

[techywarrior 689]

Excellent!

 

I'll wait for a few more people to test it. Eager for Sven because he has a large TV guide list and some of his channels have no listings (and I want to make sure that I didn't break that part since I have no way to really test it) and then I'll update the pull request and we can hopefully get this into the current release cycle.

[Sven 136]

@@techywarrior I test it this evening.... Now at work.

Edited March 11, 2015 by Sven

[Sven 136]

Looks ok for me.

Only sliding right and left it a little bit slower. But that's probably because off al the different programs.

 

But it's maybe 1 or max 2 seconds....

 

 

 

[techywarrior 689]

Thanks Sven. It should have been faster then the last version I had you guys test but if you have lots of blank space (like your guide has) then it would be slower then the old version that was in the web client.

 

The big thing for me that I couldn't test was the channels that didn't have guide data or, more importantly, the ones with sporadic guide data. Everything looks good in the screenshot so I am going to update the pull request and we should see this in the web client soon.

[Sven 136]

Yeah it's fatser then before. I hope with you to see it fast in the web client.

[TedA 36]

Looks ok for me.

Only sliding right and left it a little bit slower. But that's probably because off al the different programs.

 

But it's maybe 1 or max 2 seconds....

 

 

 

Just to clarify, do you mean that there is 1-2 seconds of lag when you try to scroll to the far right?