Word Wrap Problems - Windows

[dgilbert2]

Hi

I'm seeing a problem where the screen layout has stopped wrapping text, so all the channel lines are of equal size and if you hold the cursor over a programme, you just get a small grey box with most of the text missing. Please see attached screen shots.

This seems to be something of a Windows problem, as its fine on my iPhone, RPI, Mac and iPad. I've tried two different Windows (10) computers with Chrome, Firefox, Edge, Internet Explorer browsers, but all the same.

Not sure what to do?

[speculatrix]

Hmm, interesting. I'll have a play. I'm not much of an html or css hacker, so I can't promise miracles!

[speculatrix]

Hello, if you pull the latest version, I have fixed loads of HTML errors after checking with W3C, and fixed the tooltip mouseover.

please let me know if this solves your problem.

[dgilbert2]

Hi,

Thank you for the update which I've now tried. The grey boxes are now displayed as they should, but the main channel lines still don't look quite right. I've attached an iOS and Windows display so you can see what I mean...

Windows:

iOS:

[speculatrix]

hmm, this is tricky, what to do with items that are too short, or have nearly finished so the boxes displaying them are quite narrow.

I think I can solve the latter by adding an offset to the left most item to shift right, allowing the box to be wider and right-aligned.

as to very short lived events, I am not sure what to do. any ideas?

[speculatrix]

I think the iOS one offsetting the description below the (R) is a quirk of safari and its defaults, I can add the word-wrap CSS to that text.

[dgilbert2]

I'm not sure, but I've had another look at Windows, Safari and RPI (Chrome). It is only Windows that does not expand the channel line (it used to though) so it "runs out" of line space much sooner. If only Windows could expand the line it would make things so much clearer, apart from those really short duration TV programmes? See below; Windows: RPI: Safari:

[dgilbert2]

Also, look at the text on CBBC, "DIY Deadly with Steve Backshall", Windows does not word wrap but the others do?

[dgilbert2]

Sorry one more thought, maybe because of this lack of word wrap in windows, is the reason the channel line is not expanding (in height).

[speculatrix]

I think so, if the program title could wrap, then I think it would solve quite a few problems. I'll try and get that done today.

I'm happy to receive pull requests from literally ANYONE who has any CSS and HTML skills, I'm a devops engineer, not a web hacker ;-)

[speculatrix]

I've made the program title wrap, and fixed some more HTML errors, and it now only gets 5 errors and 2 warnings in W3C compliance checker. it's still a big fugly but it's a lot more readable on short items

[dgilbert2]

Hi

This is looking much better now and the channel lines are expanding in height again :-)

One setting I was just trying is to change the tooltip "relative" setting to "static", eg below; .tooltip { position: static;

position: relative;

This seems to simply hide the text which is too long rather than overlaying ontop of other text. It looks much cleaner, see what you think...

static;

relative;

[dgilbert2]

Just a thought, could the programme title then be included in the grey tooltip box? Everything can then be read.

[speculatrix]

I could certainly put the title into the tooltip box, that would be easy to do, it makes sense to do so.

[speculatrix]

give that a go, the title appears in bold and underlined. it does seem to help.

[dgilbert2]

Looks good now, thank you.

I have manually changed my copy to position: static to avoid overlaying the titles in the main epg on top of other text.

[speculatrix]

I have spent a while hacking around so that programs which are already in progress still show up with a good width, so please give that a go and see how it looks.

[dgilbert2]

Morning Paul

Wow, you have really improved the epg in the last couple of days and the display is clearer than it ever was. It is also consistent across the various OS platforms I've tried it on, credit to you and a big thank you:-)

These are just my very minor observations now, some of which may be a compromise though to fix everything else you have done and may not warrant any further time spent on them:

1) It seems only programmes less than 6 minutes in duration run out of width now, but to be fair, all time-based epg's suffer this challenge.

2) The programme title is now located centrally, but this maybe to help the width issue?

3) When title text is still too wide for the cell, I personally still prefer the static option. At least then it doesn't mess up the cell next to it. Having said that, there are significantly fewer occurrences of this now with all the improvements you have made.

4) I've spotted a "Channel Number" heading text way off on the right on the screen. This seems to have always been the case though.

Thanks again for all your hard work on this.

[speculatrix]

thanks very much for the feedback, I am pleased people are using this, it's something I first wrote for myself and was prepared to put up with the problems, and it is having a reception and positive audience that has spurred me on to make it much better, so thanks for that.

I am not too sure what to do about very narrow programmes. I guess the only thing is to ensure there's enough visible so as to make a target you can touch and bring up the tooltip, and make the (R) visible?

The programme name being central is an accident of making the title wrappable, I think that's when I saw it. I did it deliberately in the floating tooltip to make make it more readable.

    .tooltip {
        position: relative;
        display: inline-block;
        white-space: pre-wrap;
    }

I can probably add a specific float-left or something to try and realign it. I'll try and static option too.

The stray channel number is almost certainly a long time bug!

You might have noticed I added a mouse-over on the (R), the channel name, and the chromecast icon. Have you got chromecasting to work by any chance?

[dgilbert2]

You are more than welcome, credit where credit is due :-)

I've just seen this very narrow programme, 2 minutes, that's got to be one of the shortest!? The R is still visible and enough of the title for the tooltip to come up, so if the start time and duration was added to the tooltip, for me, that's all that's needed?

No, I hadn't spotted the "chromecast this" and "record this" tooltips, but I have now. Quite helpful when you are finding your way around for the first time.

On the subject of Chromecast, yes, I do use it all the time. I was going to raise this as a new issue but whilst we are on the subject.......

Whilst I was in the "tvh_epg" zone last night, I thought I would update to the latest version of pychromecast. In turns out that everything post V10 is a "breaking" release. It did as well, it breaks tvh_epg with the "internal server error". The last version that is compatible with tvh_epg is therefore V9.4.0 ( https://github.com/home-assistant-libs/pychromecast/archive/refs/tags/9.4.0.zip ).

This reminded me of issue #10 where a similar thing happened with V7. In all honesty I don't think it warrants updating tvh_epg for V10+ again, because if you did and users do not know about pychromecast needing updating too, its just wastes time all round debugging. I would just make it a requirement in the installation instructions for tvh_epg to use pychromecast V9.4.0 (or earlier) and leave it at that?

[speculatrix]

I did some more tweaks, adding an icon which indicates there's a mouseover tooltip and the (R) and title now go to the left as expected.

I've found that every time I've upgraded pychromecast that I have to rewrite support for it ;-( thanks for checking the versions, I'll add that to the README

I've added you to the Acknowledgement And Thanks section as recognition for your help.

[speculatrix]

oops, I broke the mouseover record-this, reverted that

[dgilbert2]

Thank you, looking good :-)

[speculatrix]

I another   to try and align the times better; and made the tooltip's css static like you asked.

I've noticed that the columns don't align well if there's a large already-playing item.

I've had an experiment to a fiddle factor to short items, it makes them more readable, but adding compensation to realign everything else might be impossible unless I can come up with a plan.

[dgilbert2]

Opps, something has broken the TV Logos on the "Channels" page?

Everything else looks spot on.

[dgilbert2]

Morning

Out of curiosity I had a quick look at the code and compared the TV two icon printing sections to try and understand the above problem. In summary I ended up just copying lines 805 to 823, over 574 to 592 and it worked again.

Obviously you will understand the logic of the various changes originally made that I'm missing, as this might not be the correct solution ;-)

[speculatrix]

I'll take a look at that.

BTW, have you tried this: https://github.com/speculatrix/tvh_radio I use it in a raspberry pi with an iqaudio hat. I run it in a tmux session and control with browser on smartphone or tablet.

[speculatrix]

Hi, I fixed page_channels with the same code as page_epg, yes, I'd screwed up the change to use format string notation in the former. The newer pylint complains if you use 'some string %s blah blah' % (some_value,) and wants f'some string {some_value}'

where it makes things more reasonable I am making the change bit by bit.

[speculatrix]

while I was looking at picons, it's always nagged me that you get broken images, so I added a feature to detect if the icon file exists locally (if you configure the directory path) and only presents an image if the file will be found.

works for me (TM). I have the TVLogos downloaded to /home/hts/TVLogos, but you could have them in /var/www/html/TVLogos or wherever they can be served.

[speculatrix]

the improvements are great, @dgilbert2 so I have posted an updated on the TVH forum https://tvheadend.org/boards/5/topics/34232?r=47266#message-47266

[dgilbert2]

You've been busy again :-)

All working now including the picon check when I setup local_icon_dir for my location. So if a TV Logo is not found I just see an empty grey box, is that the idea?

I like you forum post too ;-)

I will have to take a look at tvh_radio, although to be honest we hardly ever listen to the radio. Can it run on the same RPI as tvh_epg or does it need to be a separate one?

[speculatrix]

yes if no icon, will show a blank box. I might implement a feature to use a generic icon or something, maybe the TVH icon itself.

tvh_radio is a streaming player, so you'd run it on something connected to speakers, I use it on a Pi on my desk, but also on my personal laptop and a NUC connected to the TV which I use as a media player. I'm intending to add hardware button support, and then build a Pi into a repurposed radio cabinet so it will be as easy to use as a normal radio. I did this because DAB radio is awful quality, internet streams are often low bit rates and mono, and FM has too much interference.

[speculatrix]

feel free to contact me via the TVH forum and maybe collaborate on this and other things via direct chat.

[speculatrix]

I think this is now finished as best as is possible except for the problem of v short programmes.