Widget to see history of pictures who rang the door bell

@Oliver2 thanks for sharing this widget. It inspired me to create my version of the photo history widget. My goal was to avoid bash scripts and manipulating images on the file system
Here is my widget implementation

Items:
Image doorbell_ftp_image - item is linked to FTP Upload channel
String doorbell_camera_history - items

The rule which is triggered on each image upload:

Widget:

uid: CameraHistory
tags: []
props:
  parameters:
    - context: item
      label: Image History Item
      name: history
      required: false
      type: TEXT
    - label: Mjpeg Camera Url
      name: liveUrl
      required: false
      type: TEXT
    - label: Hls Camera Url
      name: hlsUrl
      required: false
      type: TEXT
timestamp: Mar 21, 2023, 1:35:02 PM
component: f7-block
config:
  style:
    height: 100%
    margin: 0px
    max-height: 100%
    max-width: 100%
    padding: 0px
    width: 100%
slots:
  default:
    - component: oh-image
      config:
        lazy: true
        lazyFadeIn: true
        style:
          bottom: 0px
          display: block
          height: auto
          left: 0px
          margin: auto
          margin-left: auto
          margin-right: auto
          max-height: 100%
          max-width: 100%
          padding: 0px
          position: absolute
          right: 0px
          top: 0px
          width: auto
        url: =props.liveUrl
        visible: =props.liveUrl !== undefined
    - component: oh-video
      config:
        style:
          bottom: 0px
          display: block
          height: auto
          left: 0px
          margin: auto
          margin-left: auto
          margin-right: auto
          max-height: 100%
          max-width: 100%
          padding: 0px
          position: absolute
          right: 0px
          top: 0px
          width: auto
        url: =props.hlsUrl
        visible: =props.hlsUrl !== undefined
    - component: oh-link
      config:
        action: photos
        actionPhotoBrowserConfig: '{ "lazy": true, "type": "popup", "navbarShowCount": true}'
        actionPhotos: =vars.urls
        color: orange
        style:
          pointer-events: none
          position: absolute
          right: 10px
          top: 10px
        visible: =props.history !== undefined && JSON.parse('[' + @props.history + ']').length != 0
      slots:
        default:
          - component: oh-link
            config:
              action: command
              actionCommand: " "
              actionItem: =props.history
              style:
                pointer-events: none
            slots:
              default:
                - component: oh-link
                  config:
                    action: variable
                    actionVariable: urls
                    actionVariableValue: ='[' + @props.history + ']'
                    badge: =JSON.parse('[' + @props.history + ']').length
                    badgeColor: orange
                    style:
                      pointer-events: auto
                    text: " "

Snapshots:
Live camera view


You’ll see a photo gallery with history images by clicking on the history counter in the top right corner. Also, it will clear the history item

WARNING: This implementation has a downside, it stores all history images content in one string item and performance is not good when you have more than 100 unseen images. To fix it I’m working on API extension to put only URLs in history instead of image itself

Thanks to @JustinG for multiple actions on one click