How to set a background color to <video> tag in an EmulationStation's theme ?

Andearoid

I use this code to display video snapshots on my gameslists with EmulationStation :

<video name="md_video">
         <pos>0.308 0.369</pos>
         <maxSize>0.2005 0.2680</maxSize>
         <delay>1.0</delay>
         <zIndex>44</zIndex>
</video>

And I would like to set a black background color behind the video.

Why ? I show the video snapshot over the screenshot. But on some vertical games, the screenshot picture is larger than the video capture resolution. So, it shows the screenshot behind the video. And it's not pretty.

Demonstration : https://youtu.be/hh8kmRI7akk

I tried to set a <color>000000</color> tag to the video object.
But It doesn't do any change.

Is there another trick I can use to fix this issue ?

I took a look to another EmulationStation theme : Next Pixel.
It had the same issue : https://youtu.be/IatG6KHB0TY

Perhaps it could be a good improvement too. I don't know exactly.

Andearoid

Here is available parameters for the <video> tag :

pos - type: NORMALIZED_PAIR.

size - type: NORMALIZED_PAIR. 
If only one axis is specified (and the other is zero), the other will be automatically calculated in accordance with the video's aspect ratio.

maxSize - type: NORMALIZED_PAIR. 
The video will be resized as large as possible so that it fits within this size and maintains its aspect ratio. Use this instead of size when you don't know what kind of video you're using so it doesn't get grossly oversized on one axis (e.g. with a game's video metadata).

origin - type: NORMALIZED_PAIR. 
Where on the image pos refers to. For example, an origin of 0.5 0.5 and a pos of 0.5 0.5 would place the image exactly in the middle of the screen. If the "POSITION" and "SIZE" attributes are themable, "ORIGIN" is implied.

rotation - type: FLOAT. 
angle in degrees that the text should be rotated. Positive values will rotate clockwise, negative values will rotate counterclockwise.

rotationOrigin - type: NORMALIZED_PAIR. 
Point around which the text will be rotated. Defaults to 0.5 0.5.

delay - type: FLOAT. Default is false. 
Delay in seconds before video will start playing.

default - type: PATH. 
Path to default video file. Default video will be played when selected game does not have a video.

showSnapshotNoVideo - type: BOOLEAN 
If true, image will be shown when selected game does not have a video and no default video is configured.

showSnapshotDelay - type: BOOLEAN 
If true, playing of video will be delayed for delayed seconds, when game is selected.

visible - type: BOOLEAN. 
If true, component will be rendered, otherwise rendering will be skipped. Can be used to hide elements from a particular view.

zIndex - type: FLOAT. 
z-index value for component. Components will be rendered in order of z-index value from low to high.

This means we can't set a background color behind the video to hide the snapshot completely.

Andearoid

I put a note for an improvment here: https://github.com/batocera-linux/batocera-emulationstation/issues/321

Andearoid

I found a workaround, let's see the result : https://www.youtube.com/watch?v=0EVv5yElwj8

However it requires to use ARRM to scrap your FBNeo/Mame roms files. More information about my DIY on this thread : https://github.com/batocera-linux/batocera-emulationstation/issues/321

Andearoid

Here is the shell script I wrote to automatically make my FBNeo and MAME 0.214 gamelist.xml files compliant with the <thumbnail> tag.

tweakGamelist.sh :

#!/bin/bash

#grab gamelist.xml path
gamelist=$1
if [ ! -f "$gamelist" ]
  then
  echo "ERROR: $gamelist does not exist"
  exit 1
fi

#ignore gamelist.xml == gamelist_backup.xml
if [ -f "${gamelist%.*}_backup.${gamelist##*.}" ]
  then
  md5gl=`md5sum ${gamelist} | awk '{ print $1 }'`
  md5glb=`md5sum "${gamelist%.*}_backup.${gamelist##*.}" | awk '{ print $1 }'`
  if [ "$md5gl" == "$md5glb" ]
    then
    exit 0
  fi 
fi

#prepare temporary file
tmpgamelist="/userdata/tmp/gamelist.tmp"
rm -f "$tmpgamelist"

#parse gamelist.xml
while IFS= read -r line || [ -n "$line" ]
do
  #feed temporary file
  if [[ ! $line == *"<thumbnail>"* ]] || [[ ! $line == *"</thumbnail>"* ]]
    then
    echo "$line">>"$tmpgamelist"
  fi

  #duplicate <screenshot> as <thumbnail>
  if [[ $line == *"<screenshot>"* ]] && [[ $line == *"</screenshot>"* ]]
    then
    thumbnail="${line/<screenshot>/<thumbnail>}"
    thumbnail="${thumbnail/<\/screenshot>/<\/thumbnail>}"
    echo "$thumbnail">>"$tmpgamelist"
  fi  

done <"$gamelist"

#backup and update gamelist.xml
cp "$gamelist" "${gamelist%.*}_backup.${gamelist##*.}"
cp "$tmpgamelist" "$gamelist"
rm -f "$tmpgamelist"

Then I call my script from the /userdata/system/custom.sh shell script. It will be launch at each Batocera startup, but gamelist.xml files are updated only if they're different using an MD5 comparison.

#!/bin/bash

case "$1" in
    start)    

    #FIX GAMELIST
    /userdata/tweakGamelist.sh "/userdata/roms/fba/gamelist.xml"
    /userdata/tweakGamelist.sh "/userdata/roms/mame/gamelist.xml"
    ;;
esac