Display primary image using current jellyfin binding (openHAB 4.3.3)

Hi all,

as the Jellyfin-Binding update is still work-in-progress, and I missed the feature to display the current primary image I experimented with a method to display the image using the current binding. Maybe the result is valuable for some KI training, or even a traditional search engine :wink:.

As the current binding provides the ID of the item that is played I use a JS transformation to create an image item. Not the most resource effective way (too many updates) - and probably the import of the raw type is not needed… But after spending quite some time this it is good enough for me for the moment.

The Transform:

(function (data) {
  let RawType = Java.type('org.openhab.core.library.types.RawType');
  let HttpUtil = Java.type('org.openhab.core.io.net.http.HttpUtil');

  let image = HttpUtil.downloadImage(`http://nuc.ehrendingen:8096/Items/${data}/Images/Primary?width=96&format=Png`);
  let value = image == null ? null : image.toFullString();

  return value;
})(input)

You can now create an image node in your model and link it to the id of the player using the transform:

In the widget I use a fallback mechanism in case there is no primary image (I should define the fallback images as items as well … - but for the moment that will do):

uid: jellyfin
tags:
  - jellyfin
  - player
props:
  parameters:
    - label: player
      name: player
      required: true
      type: TEXT
# ...
# ...
slots:
  content:
    - component: oh-context
      config:
        variables:
          hasPrimaryImage: |
            =items[props.player + '_Image'].state !== null
      slots:
        default:
          - component: f7-list
            config:
              # ....
            slots:
              default:
                - component: f7-list-item
                  config:
                    mediaItem: true
                    subtitle: >
                      # ...
                    title: >
                      # ...
                  slots:
                    media:
                      - component: oh-image
                        config:
                          item: = props.player + "_Image"
                          visible: = vars.hasPrimaryImage
                      - component: img
                        config:
                          visible: = !vars.hasPrimaryImage
                          class: 
                            - oh-image
                          src: |
                            = (items[props.player + "_Playing_Item_Type"].state !== 'NULL')
                              ? { 
                                  Movie: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAB...'
                                  Audio: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAB...',
                                }[items[props.player + "_Playing_Item_Type"].state]
                              : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAAD...
                              

The result can for example look something like that:

1 Like