FredFrin 5 Posted January 12, 2020 Share Posted January 12, 2020 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 Link to comment Share on other sites More sharing options...
Luke 37028 Posted January 12, 2020 Share Posted January 12, 2020 Hi, they need to be image files. Any size is fine, but 1:1 aspect ratio is recommended. Link to comment Share on other sites More sharing options...
FredFrin 5 Posted January 13, 2020 Author Share Posted January 13, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
Luke 37028 Posted January 13, 2020 Share Posted January 13, 2020 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. Link to comment Share on other sites More sharing options...
FredFrin 5 Posted February 2, 2020 Author Share Posted February 2, 2020 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; } Link to comment Share on other sites More sharing options...
FredFrin 5 Posted February 16, 2020 Author Share Posted February 16, 2020 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 ..) Link to comment Share on other sites More sharing options...
Luke 37028 Posted February 16, 2020 Share Posted February 16, 2020 I'm not sure all platforms would be able to support svg. It's possible to look at that in the future. Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now