Live TV Series Image Aspect Ratio Wrong

[QDivision 39]

Hi, 

 

Firstly loving the new update, seems to have fixed quite a few annoying bugs.

As the title says the poster images in the series section of the Live TV are wrong, they show up in poster format rather than 16:9 which is the aspect ratio of the images. I've had this problem before with other sections and they have been fixed. See screenshot.

 

Also when you click on a series item, the image shows up on widescreen devices but not narrow e.g. mobile. again see screenshots.

 

Thanks

[Luke 36991]

Hi, are you using a live tv plugin?

[QDivision 39]

Yes, I am using DVBLink.

[QDivision 39]

Is this being looked into?

[Luke 36991]

Hi, we'll look into this for a future update. It's just a little difficult to test because it's specific to the plugin. Thanks.

[QDivision 39]

Does it matter about the plugin. Can't you detect resolution and display it in the correct ratio?

[QDivision 39]

Is this still being looked at? Would be really good to get a fix for this.

[Luke 36991]

This is a difficult one for plugins because it takes the name of the series, looks for a matching series in your emby library, and then uses that poster. And in that situation we can expect a 2:3 aspect ratio. When no series exists it just grabs an image from one of the programs. So now for plugins we'd have to rethink all of this, although it be much easier for everyone involved to simply force plugins to work the same way.

 

You can work around this in the meantime by simply having a tv library with those series in your library.

[QDivision 39]

in other scenarios it seem emby can handle different aspect ratio images by detecting what it's resolution is first then displaying in the correct format, can't this be done in this case?

[Luke 36991]

Because this is a special case that's not hooked into that. So again this leaves us with the undesirable decision of, do we go further down the path of having the plugins be different (costly, prone to breaking), or do we try to think about another way to force the plugins to behave the same was as the core live tv (better, more "just works"). It is something we'll have to look at when we can. Thanks.

[QDivision 39]

why does it work for the scheduled section then?

[Luke 36991]

Because the aspect ratio being used there just happens to match your images.

[QDivision 39]

Hi, is this still being looked into, it is still a problem with the latest release and been quite an annoying bug for some time.

[Luke 36991]

Can you show a new screenshot? Thanks.

[QDivision 39]

I had a look at the source and the image itself is actually the correct aspect ratio but the way it is displayed is wrong, changing the background-size element to contain is a temporary fix however what should be done is a detection on the source aspect ratio and alter the full slider to match the most common ratio and have anything else that is different as 'background-size: contain'

Edited April 20, 2019 by DIY-Sensei

[QDivision 39]

After some further looking at the source I can see the css styling does have the correct setting for the aspect ratio if i change the class to 'cardPadder-overflowBackdrop' instead of 'cardPadder-overflowPortrait' so it seems emby is assigning the wrong class to this row.

 

If this is fixed and the default background setting is changed to contain this should fix it.

[Luke 36991]

Thanks for the info.

[QDivision 39]

Just to add, it appears emby detects the right css styling to apply on some sections e.g. tv recordings but i've noticed this is when all the items have images associated. The ones it is broken on like the attached images above have the majority of images missing i.e. just displays the text name of the show. e.g. if there are 20 items in a row, 12 will not have images and 8 will, so maybe emby is calculating what aspect ratio to use based on the missing images as well which is skewing the correct result?

[QDivision 39]

Is this likely going to be fixed any time soon? 

[Luke 36991]

I believe the schedule and dvr sections should be improved for the next release.

[QDivision 39]

Hi Luke,

 

I find it quite frustrating that this still hasn't been solved with the latest round of updates, I have taken it upon myself to find a fix and only had to chnage a few .js files to get the display to work as expected. I would appreciate if you could look at the changes made and incorporate them in to the next release as obviously my change will only affect the web app and not the other dedicated apps. I understand that my changes may not be the best approach as I did it just to fix my issues but I'm sure you can come up with a proper solution.

 

Please see my attached screenshots to see the difference it has made.

 

I don't want to have to keep editing these files every time there is a new server release so it would be great to have an actual fix to this.

 

 

 

 

IN "Emby-Server\system\dashboard-ui\bower_components\emby-webcomponents\cardbuilder\cardbuilder.js"

 

ADD case "SeriesTimer" and case "Timer"

 

      if (!options.shape) {

        options.shape = options.defaultShape || function(window, lineStringProperty) {

          var helloComponent = window[0];

          if (helloComponent) {

            switch(helloComponent.Type) {

              case "Movie":

              case "SeriesTimer":

                return "autooverflow" === lineStringProperty ? "overflowPortrait" : "portrait";

              case "Episode":

              case "Program":

              case "Video":

                return "autooverflow" === lineStringProperty ? "overflowBackdrop" : "backdrop";

            }

          }

          return "autooverflow" === lineStringProperty ? "overflowSquare" : "square";

        }(url, value);

      }

 

TO

 

      if (!options.shape) {

        options.shape = options.defaultShape || function(window, lineStringProperty) {

          var helloComponent = window[0];

          if (helloComponent) {

            switch(helloComponent.Type) {

              case "Movie":

              case "SeriesTimer":

                return "autooverflow" === lineStringProperty ? "overflowPortrait" : "portrait";

              case "Episode":

              case "Program":

              case "SeriesTimer":

              case "Timer":

              case "Video":

                return "autooverflow" === lineStringProperty ? "overflowBackdrop" : "backdrop";

            }

          }

          return "autooverflow" === lineStringProperty ? "overflowSquare" : "square";

        }(url, value);

      }

 

AND CHANGE

 

if (options.showChannelLogo && data.ChannelPrimaryImageTag) {

    clientApiUrl = obj.getScaledImageUrl(data.ChannelId, {

        type : "Primary",

        height : 40,

        tag : data.ChannelPrimaryImageTag

    });

}

 

TO 

 

if (options.showChannelLogo) {

    clientApiUrl = obj.getScaledImageUrl(data.ChannelId, {

        type : "Primary",

        height : 40,

        tag : data.ChannelPrimaryImageTag ? data.ChannelPrimaryImageTag : null

    });

}

 

IN "Emby-Server\system\dashboard-ui\bower_components\emby-webcomponents\homesections\homesections.js"

 

CHANGE

 

  function main_set_dialog(user) {

    return $.getCardsHtml({

      items : user,

      preferThumb : "auto",

      inheritThumb : false,

      shape : "autooverflow",

      showParentTitleOrTitle : true,

      showTitle : true,

      centerText : true,

      overlayText : false,

      allowBottomPadding : false,

      showAirTime : true,

      showChannelName : false,

      showAirDateTime : false,

      showAirEndTime : true,

      lines : 3,

      overlayPlayButton : true

    });

  }

 

TO 

 

  function main_set_dialog(user) {

    return $.getCardsHtml({

      items : user,

      preferThumb : "auto",

      inheritThumb : false,

      shape : "backdrop",

      showParentTitleOrTitle : true,

      showTitle : true,

      centerText : false,

      overlayText : false,

      allowBottomPadding : false,

      showAirTime : true,

      showChannelName : false,

      showChannelLogo : true,

      cardLayout : true,

      showAirDateTime : false,

      showAirEndTime : true,

      lines : 3,

      overlayPlayButton : true

    });

  }

 

 

IN "Emby-Server\system\dashboard-ui\livetv\schedule.js"

 

CHANGE

 

        var satisfiesUpperLimit = 1.5 <= expectedCeil;

        tds = tds + $ionicFilterBar.getCardsHtml({

          items : e.items,

          shape : satisfiesUpperLimit ? has() ? "overflowBackdrop" : "backdrop" : has() ? "autooverflow" : "auto",

          showParentTitleOrTitle : true,

          showAirTime : true,

          showAirEndTime : true,

          showChannelName : !satisfiesUpperLimit,

          cardLayout : satisfiesUpperLimit,

          centerText : !satisfiesUpperLimit,

          action : "edit",

          cardFooterAside : false,

          overlayText : false,

          showChannelLogo : satisfiesUpperLimit,

          preferThumb : satisfiesUpperLimit || null,

          coverImage : null,

          multiSelect : false

        });

 

TO

 

        // var satisfiesUpperLimit = 1.5 <= expectedCeil;

        tds = tds + $ionicFilterBar.getCardsHtml({

          items : e.items,

          shape : "backdrop",

          showParentTitleOrTitle : true,

          showAirTime : true,

          showAirEndTime : true,

          showChannelName : false,

          cardLayout : true,

          centerText : false,

          action : "edit",

          cardFooterAside : false,

          overlayText : false,

          showChannelLogo : true,

          preferThumb : "auto",

          coverImage : null,

          multiSelect : false

        });

 

 

IN "Emby-Server\system\dashboard-ui\livetv\series.js"

 

CHANGE

 

    return utils.getCardsHtml(items, {

      items : items,

      shape : "auto",

      showTitle : true,

      cardLayout : false,

      preferThumb : "auto",

      overlayText : false,

      showSeriesTimerTime : true,

      showSeriesTimerChannel : true,

      centerText : true,

      overlayMoreButton : true,

      lines : 3,

      multiSelect : false

    });

 

TO

 

    return utils.getCardsHtml(items, {

      items : items,

      shape : "backdrop",

      showTitle : true,

      cardLayout : true,

      preferThumb : "auto",

      overlayText : false,

      showSeriesTimerTime : true,

      showSeriesTimerChannel : true,

      centerText : false,

      overlayMoreButton : true,

      showChannelLogo : true,

      lines : 3,

      multiSelect : false

    });

 

 

IN "Emby-Server\system\dashboard-ui\livetv\suggestions.js"

 

CHANGE

 

    return state = state || {}, disposable.getCardsHtml(Object.assign({

      items : warnings,

      preferThumb : "auto",

      inheritThumb : false,

      shape : "autooverflow",

      showParentTitle : true,

      showTitle : true,

      centerText : true,

      overlayText : false,

      lazy : true,

      overlayMoreButton : "more" === status,

      overlayPlayButton : "play" === status,

      allowBottomPadding : false,

      showAirTime : true,

      showAirDateTime : true,

      lines : 3,

      multiSelect : false

    }, state));

 

TO
 

    return state = state || {}, disposable.getCardsHtml(Object.assign({

      items : warnings,

      preferThumb : "auto",

      inheritThumb : false,

      shape : "backdrop",

      cardLayout : true,

      allowBottomPadding : false,

      showParentTitle : true,

      showChannelLogo : true,

      showTitle : true,

      centerText : false,

      overlayText : false,

      lazy : true,

      overlayMoreButton : "more" === status,

      overlayPlayButton : "play" === status,

      allowBottomPadding : false,

      showAirTime : true,

      showAirDateTime : true,

      lines : 2,

      multiSelect : false

    }, state));

 

 

AND CHANGE

 

    this.movieItemsContainer.getItemsHtml = function(warnings) {

      return done(warnings, null, {

        shape : "overflowPortrait",

        preferThumb : null,

        lines : 2

      });

 

TO

 

    this.movieItemsContainer.getItemsHtml = function(warnings) {

      return done(warnings, null, {

        shape : "backdrop",

        preferThumb : null,

        lines : 2

      });

Edited August 25, 2019 by DIY-Sensei

[Luke 36991]

It's not that simple as those changes would be specific to your images.

[QDivision 39]

I'm sure you can come up with a non specific fix and surely most TV images are landscape so it seems odd that it is not well supported.

[ebr 14897]

and surely most TV images are landscape so it seems odd that it is not well supported.

 

Actually, that isn't the case as our guide data has portrait style images - thus the issue...

[QDivision 39]

Actually, that isn't the case as our guide data has portrait style images - thus the issue...

 

Well it still seems like the issue can be solved by some simple detection of the images. Also don't you think the live tv images in my screenshots look better with the card style and the tv logos? (I know that design is subjective) in either case it would be great to at least have this long standing issue resolved.