Youtube.fusion

prototype(Jonnitto.PrettyEmbedYoutube:Component.Youtube) < prototype(Neos.Fusion:Component) {
    configuration = ${Configuration.setting('Jonnitto.PrettyEmbedYoutube')}

    live = true
    videoID = ${null}
    videoID.@process.trim = ${Type.isString(value) ? String.trim(value) : value}

    type = ${this.configuration.defaults.type}
    lightbox = ${this.configuration.defaults.lightbox}
    preserveAspectRatio = ${this.configuration.defaults.preserveAspectRatio}
    allowFullScreen = ${this.configuration.defaults.allowFullScreen}
    controls = ${this.configuration.defaults.controls}
    loop = ${this.configuration.defaults.loop}
    closedCaptions = ${this.configuration.defaults.closedCaptions}
    showRelated = ${this.configuration.defaults.showRelated}
    playsinline = ${this.configuration.defaults.playsinline}
    enableJsApi = ${this.configuration.enableJsApi}
    enableGdprMessage = ${Configuration.setting('Jonnitto.PrettyEmbedHelper.enableGdprMessage')}
    gdprMessage = Jonnitto.PrettyEmbedHelper:GdprMessage
    gdprMessageAccept = Jonnitto.PrettyEmbedHelper:GdprMessageAccept
    gdprMessageNewWindow = Jonnitto.PrettyEmbedHelper:GdprMessageNewWindow

    # Pass a ratio like this: ${16 / 9}
    ratio = ${null}
    ratio.@process.calculatePaddingTop = ${Jonnitto.PrettyEmbedHelper.paddingTop(value)}

    // If true, this get only a value if ratio is not set
    force16to9 = false
    force16to9.@process.calculatePaddingTop = ${!this.ratio && value ? Jonnitto.PrettyEmbedHelper.paddingTop(16 / 9) : false}

    wrapper = ${Configuration.setting('Jonnitto.PrettyEmbedHelper.wrapper')}

    id = ${null}

    poster = ${null}
    poster2x = ${null}
    alternativeText = ${null}
    origin = ${null}

    playButton = Jonnitto.PrettyEmbedHelper:Button.Play

    // Internal
    look = ${this.lightbox ? 'lightbox' : 'inline'}
    url = ${this.configuration.url[this.type]}
    guessedPoster = ${this.type == 'video' ? '//i.ytimg.com/vi/' + this.videoID + '/maxresdefault.jpg' : null}
    previewImageClass = ${this.poster ? null : 'jonnitto-prettyembed__youtube-preview'}
    hasRatioAndNoLightboxWithPreserveAspectRatio = ${this.lightbox && this.preserveAspectRatio ? false : !!this.ratio}
    forceRatio = ${this.ratio || this.force16to9}

    @if.hasVideoID = ${this.videoID && (this.poster || this.guessedPoster)}

    renderer = Neos.Fusion:Tag {
        tagName = ${props.live ? 'a' : 'div'}
        attributes {
            id = ${props.id}
            class = Carbon.Eel:BEM {
                block = 'jonnitto-prettyembed'
                modifier = Neos.Fusion:DataStructure {
                    youtube = true
                    iframe = true
                    ratio = ${!!props.force16to9 || !!props.hasRatioAndNoLightboxWithPreserveAspectRatio}
                    look = ${props.look}
                }
            }
            href = ${String.replace(props.url.href, '%id%', props.videoID)}
            rel = 'noopener'
            target = '_blank'
            style = ${props.force16to9 || props.hasRatioAndNoLightboxWithPreserveAspectRatio ? 'padding-top:' + props.forceRatio : null}
            data-gdpr = ${props.enableGdprMessage && props.gdprMessage ? props.gdprMessage : null}
            data-gdpr-accept = ${props.enableGdprMessage && props.gdprMessageAccept ? props.gdprMessageAccept : null}
            data-gdpr-new-window = ${props.enableGdprMessage && props.gdprMessageNewWindow ? props.gdprMessageNewWindow : null}
            data-ratio = ${props.forceRatio || null}
            data-fs = ${!!props.allowFullScreen}
            data-embed = Neos.Fusion:Join {
                src            = ${String.replace(props.url.embed, '%id%', props.videoID)}
                connect        = ${String.indexOf(props.url.embed, '?') == -1 ? '?' : '&'}
                autoplay       = 'autoplay=1'
                modestbranding = '&modestbranding=1'
                enableJsApi    = ${props.enableJsApi ? '&enablejsapi=1' : ''}
                playsinline    = ${'&playsinline=' + (props.playsinline ? '1' : '0')}
                controls       = ${props.controls ? '' : '&controls=0'}
                loop           = ${props.loop ? '&loop=1' : ''}
                closedCaptions = ${props.closedCaptions ? '&cc_load_policy=1' : ''}
                showRelated    = ${props.showRelated ? '&rel=1' : '&rel=0'}
                fullscreen     = ${props.allowFullScreen ? '' : '&fs=0'}
                origin         = ${props.origin ? '&origin=' + props.origin : ''}
            }
        }
        content = afx`
            {props.playButton}
            <img alt={props.alternativeText} src={props.poster || props.guessedPoster} srcset={props.poster && props.poster2x ? props.poster + ' 1x,' + props.poster2x + ' 2x' : null} class={props.previewImageClass} loading='lazy' />
        `

        @process {
            assets = afx`
                <Jonnitto.PrettyEmbedHelper:Assets youtubeAPI={props.enableJsApi} />
                {value}
            `
            wrapper = Jonnitto.PrettyEmbedHelper:Wrapper {
                wrapper = ${props.wrapper}
            }
        }
    }
}