Options for image / doc display on detailed audio track page

[FredFrin 5]

Hi,

 

I note it is already possible to add a custom image on a per-audio-track basis in Music libs,

these images are then displayed in the detailed Track page on Playback.

 

This seems to be aimed as display of CD Cover images, there seem to be size / height/width

limitations (with images which are not roughly sqaure ?) - I noted a portrait-format image was

displayed on the left of the playback bar at the bottom, but not on the main page.

 

What I'm wondering is:

 

 - what are the image limitations for display?

 

 - what formats are supported ?

 

 - would it be possible to support document formats (.odt or .doc or .pdf)?

 

What I'm trying to achieve:

 

It's common for peeps making music to practice along to recorded tracks, and it would be really nice

if there was a convenient way for Emby to display musical notation of the track in whatever format

to aid the learning process. Currently when the track changes & I need to fumble with paper-based folders

to find the next track before I can start playing ...

 

In my case I have the chords written in textual form in Office documents. I have been able to convert

such a file to pdf - then from pdf to jpeg - then cropped it to be roughly square ... pretty manual process

but it did work with said limitations.

 

It would be great if I could display (the first page of) an .odt or .pdf file in A4 (or US Letter) format.

 

Would this be  possible - or perhaps someone has an alternate idea which might achieve something similar?

 

cheers,

Fred 

[Luke 36992]

Hi, they need to be image files. Any size is fine, but 1:1 aspect ratio is recommended.

[FredFrin 5]

Ok, the aspect ratio of the img is maintained - which is good. However there is a height limitation - looks like on a percentage basis (changing the height of the browser changed img height,

but the max height is only ~50% of the window height. For very simple tracks this works - but for portrait data approaching a paper page size, scaling just makes the text too small to read - 

pls see attached 2 image samples. This is a shame as I thing this could be a really nice feature(that nobody else supports). 

 

Would it be poss to allow to explicitly set greater height percentages via either a config pram, or possibly a naming convention of the img file (maybe imagename_a4.jpg or imagename_80% ....) ?

 

 Or maybe a way to provide some css for the containing div??

 

Well - I know the answer - of course it's possible - but is there a realistic chance of it happening? 

Edited January 13, 2020 by FredFrin

[Luke 36992]

This is a little outside the normal use case so i think your best bet will be figuring something out with our custom css feature.

[FredFrin 5]

So, I played around with the CSS for an hour and the result is quite nice (see screenshot). 

Side effect is that CD cover images for 'standard' CDs also appear larger. Since their resolution

is often relatively small this may cause more evident blurring.

 

I havn't seen the library name or album folder as an html-id in the song details page anywhere -

this would be really nice enhancement it would allow library-specific css.

 

/* Resize Media Images - quick method to check css changes made here work ... 
#homeTab .section0 .smallBackdropCard {
    width: 10%;
}
*/

/* This reduces the padding around the header row, but this space is not
     available to the poster image. The gain is not large anyway - and we get
     misalignment with the playlist column header - best skip this ....
.headerTop {
  padding: 0 !Important;
}
*/

/* Increase available height of poster image - this makes a lot of vertical space available! */
.osdPoster-img {
   max-height: 100% !Important;
}

/* Reduce top & bottom margins around Song title */
.videoOsdText-remotecontrol {
   margin: 0.2em 0 !Important;
}

/* Reduce padding around bottom controls */ 
.videoOsdBottom-buttons {
  padding: 0.2em !Important;
}

 

[FredFrin 5]

There's always another question ...

 

@Luke: You say "They need to be image files." - wasn't sure what formats that includes ... I thought svg would provide really crisp text, so I tried setting an svg via 'Edit Images' on a track in chrome:

 

 - the Upload file selection browser includes .svg extensions as image files, so I selected one

 - on selection of 'Upload' the url is set to http://<local emby-server ip>:8096/web/index.html?uploadImage=Tiger-Rag.svg&selectImageType=Primary#!#dlg1581857250056

 - the app reloads - I see nothing in the app-log, in the browser console there appear no errors on re-load - but at the end of the re-load I see this js error: 

 page.js?v=4.3.1.0:1 Uncaught (in promise) TypeError: Cannot read property 'fn' of undefined    at Function.page.dispatch (page.js?v=4.3.1.0:1)
    at Function.page.replace (page.js?v=4.3.1.0:1)
    at Function.page.start (page.js?v=4.3.1.0:1)
    at page (page.js?v=4.3.1.0:1)
    at router.js?v=4.3.1.0:1

At this point the js-app seems crashed.

 

So there are 2 issues:

 

 - the app could be made more robust to avoid crashes

 - can svg be supported ??? HTML5 supports <svg> tags, so perhaps it's not too difficult ... I think due to it's great display properties, svg usage is only going to grow (but that's opinion of course ..)

[Luke 36992]

I'm not sure all platforms would be able to support svg. It's possible to look at that in the future. Thanks.