prototype(Jonnitto.PrettyEmbedVimeo:Content.Vimeo) < prototype(Jonnitto.PrettyEmbedHelper:Content) {
    package = 'Vimeo'

    metadataID = ${q(node).property('metadataID')}
    videoID = ${q(node).property('videoID')}
    videoID.@process.getIDFromUrl = ${this.metadataID ? this.metadataID : Jonnitto.PrettyEmbedHelper.vimeoID(value)}

    alternativeText = ${q(node).property('metadataTitle')}
    imageFromVimeo = ${q(node).property('metadataImage')}
    thumbnailFromResources = ${q(node).property('metadataThumbnail')}
    ratio = ${q(node).property('metadataRatio')}
    maximumWidth = ${Configuration.setting('Jonnitto.PrettyEmbedHelper.maximumWidth')}
    async = true

    # Should the video be opened on a lightbox?
    lightbox = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'lightbox'
    }

    # When the lightbox is set, should the preview image preserve his aspect ratio?
    preserveAspectRatio = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'preserveAspectRatio'
    }

    # If no aspect ratio can be calcualted from the oembed service, you have the possibility to force the aspect ratio 16:9
    force16to9 = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'force16to9'
    }

    # Whether to restart the video automatically after reaching the end.
    loop = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'loop'
    }

    # Whether the video plays inline on supported mobile devices.
    # Note that if set to false it does not imply that the video will always be played in fullscreen.
    playsinline = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'playsinline'
    }

    # Allow full screen
    allowFullScreen = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'allowFullScreen'
    }

    # Whether to pause the current video when another Vimeo video on the same page starts to play.
    # Set this value to false to permit simultaneous playback of all the videos on the page.
    autopause = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'autopause'
    }

    # Whether the player is in background mode, which hides the playback controls, enables autoplay, and loops the video.
    background = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'background'
    }

    # Whether the video is muted upon loading. The true value is required for the autoplay behavior in some browsers.
    muted = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'muted'
    }

    # Whether the responsive player and transparent background are enabled
    transparent = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'transparent'
    }

    # The hexadecimal color value of the playback controls, which is normally 00ADEF.
    color = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'color'
    }

    # Whether the player displays the title overlay
    previewTitle = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'previewTitle'
    }

    # Whether to display the video owner's name.
    previewByline = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'previewByline'
    }

    # Whether to display the video owner's portrait.
    previewPortrait = Jonnitto.PrettyEmbedHelper:GetProperty {
        property = 'previewPortrait'
    }

    enableGdprMessage = ${Configuration.setting('Jonnitto.PrettyEmbedHelper.enableGdprMessage')}
    gdprMessage = Jonnitto.PrettyEmbedHelper:GdprMessage
    gdprMessageAccept = Jonnitto.PrettyEmbedHelper:GdprMessageAccept
    gdprMessageNewWindow = Jonnitto.PrettyEmbedHelper:GdprMessageNewWindow

    renderer = Neos.Fusion:Component {
        @apply.props = ${props}
        poster = Neos.Fusion:Case {
            hasPersisantResource {
                condition = ${props.image || props.thumbnailFromResources}
                renderer = Neos.Neos:ImageUri {
                    asset = ${props.image || props.thumbnailFromResources}
                    async = ${props.async}
                    maximumWidth = ${props.maximumWidth}
                }
            }
            getThumbnailFromVimeo {
                condition = ${props.videoID}
                renderer = ${props.imageFromVimeo || Jonnitto.PrettyEmbedHelper.vimeoThumbnail(props.videoID)}
            }
        }
        poster2x = Neos.Neos:ImageUri {
            @if {
                hasAsset = ${this.asset}
                hasEnoughPixel = ${this.asset.width >= props.maximumWidth * 2}
            }
            asset = ${props.image || props.thumbnailFromResources}
            async = ${props.async}
            maximumWidth = ${props.maximumWidth * 2}
        }
        renderer = Neos.Fusion:Case {
            noVideoID {
                condition = ${!props.videoID}
                renderer = Jonnitto.PrettyEmbedHelper:Notification {
                    key = 'noVideoID'
                    default = 'Please add a Vimeo ID or url in the inspector'
                }
            }
            noPoster {
                condition = ${!props.poster}
                renderer = Jonnitto.PrettyEmbedHelper:Notification {
                    key = 'needPreviewImage'
                    default = 'You need to define a custom preview image.'
                }
            }
            default {
                condition = true
                renderer = afx`<Jonnitto.PrettyEmbedVimeo:Component.Vimeo {...props} live={node.context.live} />`
            }
        }
    }
}