New UI facelift anyone?

[scJohn]

BootStrap can at times feel like a sledge hammer when a regular hammer will do. But there are newer lighter weight frameworks out there that should be able to get the job done.

[stevie]

I've only been using npvr for around a month, so i have yet to look at how stuff is stored, but i assume since i saw some db files they're stored in some type of sql format .. which means a search feature waiting to happen
is there search functionality on the backend? maybe implement a search feature to search for future TV/guide airings and/or your recording library and maybe spit out vertical formatted list (like the Now page) where you could set them up to record.

with the channel grid listing page i posted above, the Now page is redundant. so rather than remove it, i'd like to turn the page into random TV shows currently airing.. it would be cool to make the Now page shows TV art/grid listing of similar stuff that you've recorded. like a page to help find new shows to watch based on your interest of previous recordings. for now, just random TV shows for simplicity if we can get something like that implemented..

[sub]

is there search functionality on the backend? maybe implement a search feature to search for future TV/guide airings

Yes, there is an API for searching. I'm away from home for a few more days though, so don't have the details handy right now.

[p37307]

I like the graphic Now page.
I am in favor of keeping the Now page also as that is a great quick channel jump TV guide page.

[stevie]

I like the graphic Now page.
I am in favor of keeping the Now page also as that is a great quick channel jump TV guide page.

the functionality of quick channel jump on the now page will be in the new channel grid page, with more options like also going into that specific channel and seeing all the future listing and being able to set them to record. at least that is what id like to see happen.

when you click a channel, maybe take you to a page (see attachment) where you can see everything going to air on that specific channel starting from current time forward.

my JS is limited, and don't really know how to fetch the data. i can do basic conditionals and comparison operators. im sure someone can make a function to get the data and i'll do the formatting.. if not, i can always resort to ripping data apart from the guide code and figuring it out.

i've actually learned a few things and managed to make a few jquery/js functions that will do some cool stuff in the new UI, and as basic as it is, not even commercial software like Plex or emby have these couple features in their UI

i never really got a whole lot into jquery and java scripting when i used to do php/mysql programming, but i'm actually finding jquery really neat.

[p37307]

Are you planning to do away with the Now Page?

I would be against that because it's nice that it loads faster than the TV guide. It gives a quick look of 'What's on Now.' I like that verses pulling up a full guide most times, esp at the top or bottom of the hour. (like 1:00 and 1:30)

Have you looked at the way the mobile UI works? It might give you some ideals.

It allows you to click a channel and see what's coming up on the channel you jumped to.

localhost:8866/mobile/#_EPG_SCREEN
localhost:8866/mobile/#_PROGRAM_SCREEN

Also here is the mobile Search page
localhost:8866/mobile/#_SEARCH_SCREEN

Note: To use mobile you have to choose classic under web server in clients

I really like what I've seen so far.

[stevie]

Are you planning to do away with the Now Page?

I would be against that because it's nice that it loads faster than the TV guide. It gives a quick look of 'What's on Now.' I like that verses pulling up a full guide most times, esp at the top or bottom of the hour. (like 1:00 and 1:30)

the Now page really isn't going away, except it's just called something else (Channels) which basically is a customizable grid format of the Now page, which tells you what's on, and allows you to tune to that channel just like the Now page, but with more options like setting the show to record.. something which you can't do from the Now page (at least not with the modern UI).. my whole idea of this UI is to not need to use the guide at all if you don't want to.

[stevie]

this is the most complicated mathematical calculation i've ever done in JS. it actually took me several hours of brain lockups to figure, i don't give up easily..
actually, the mathematical equation isn't all that complex, it's mostly the way the guide stores the time/date of things and it's not in a usable format for math..

so for example, a show start time look like: Sat Oct 14 2017 04:30:00 GMT-0400 (Eastern Standard Time)
which is, well, useless if you want to do some calulations on just the time..

basically this will take the show time in a hh:mm format, turn it into a 24 hours format (HH:MM) that is usable to turn into an epoch format to do some math calculations to figure out how much percent of a show has elapsed based on your current time. so for example: if a show starts at 3:00 and ends at 5:00 and it's currently 4:00 it will tell you that 50% show progress has elapsed. why bother wasting time looking at the shows time and your local time to see if there is any show left to watch?

if anyone knows of any ways to improve tweak/shorten it, let me know.

PHP Code:

// this gets the time of show Start and End in format hh:mm 
// hour12: false turns it into 24 hour format which is needed to turn it into an epoch format later
var stime = episodeStartTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
var etime = episodeEndTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });

//now convert the HH:MM time to a usable epoch format
var progress_finish = new Date('1970-01-01T' + etime + ':00Z').getTime() / 1000;
var progress_start = new Date('1970-01-01T' + stime + ':00Z').getTime() / 1000;

// call function to calculate the time difference between epoch start time and epoch finish time of show.
percent(progress_start, progress_finish);

function percent(start, finish) {

    // real current time.. format in HH:MM:SS
    var date = new Date();
    var hour = date.getHours();
    var mins = date.getMinutes();
    var secs = date.getSeconds();

    // convert HH:MM:SS above to epoch timestamp.
    var timenow = new Date('1970-01-01T' + hour + ':' + mins + ':' + secs + 'Z').getTime() / 1000;

    // calculate how many seconds left from start (now in a epoch format) to now
    var totalstart = (timenow - start);

    // calculate total seconds (run time) of show
    var timetotal = (finish - start);

    // get a percentage of the show completion.
    return Math.floor(totalstart / timetotal * 100)
} 


[pcostanza]

if anyone knows of any ways to improve tweak/shorten it, let me know.

Dude, you had me at "New UI facelift anyone?" I have an equal chance of learning code as I do brain surgery. Epic failure!
But I'm very appreciative of what you've done so far.

[scJohn]

If you want to start getting your hands dirty with the API here is a link:

http://localhost:8866/api/

At times I have found this link to be a little temperamental. Try refreshing the page. If that does not work then do: http://localhost:8866/modern/index.html followed by the above link.


Here is a good tutorial for date - time in JavaScript:https://javascript.info/date#creation