New: Add own component for link attributes

jonnitto · Jan 23, 2021 · 9732641 · 9732641
1 parent 7fed68c
commit 9732641
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 65 deletions.
diff --git a/Resources/Private/Fusion/Component/Attributes.fusion b/Resources/Private/Fusion/Component/Attributes.fusion
@@ -0,0 +1,59 @@
+prototype(Jonnitto.PrettyEmbedVideoPlatforms:Component.Attributes) < prototype(Neos.Fusion:Component) {
+    renderer = Neos.Fusion:Attributes {
+        id = ${props.id}
+        class = Carbon.Eel:BEM {
+            block = 'jonnitto-prettyembed'
+            modifier = Neos.Fusion:DataStructure {
+                platform = ${props.platform}
+                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}
+        aria-label = ${props.metadataTitle}
+        data-gdpr = ${props.enableGdprMessage && props.gdprMessage ? props.gdprMessage : null}
+        data-ratio = ${props.forceRatio || null}
+        data-fs = ${!!props.allowFullScreen}
+        data-embed = Neos.Fusion:Case {
+            isVimeo {
+                condition = ${props.platform == 'vimeo'}
+                renderer = Neos.Fusion:Join {
+                    src             = ${String.replace(props.url.embed, '%id%', props.videoID)}
+                    connect         = ${String.indexOf(props.url.embed, '?') == -1 ? '?' : '&'}
+                    autoplay        = 'autoplay=1'
+                    loop            = ${props.loop ? '&loop=1' : ''}
+                    color           = ${props.color ? '&color=' + String.replace(props.color, '#', '') : ''}
+                    autopause       = ${props.autopause ? '' : '&autopause=0'}
+                    background      = ${props.background ? '' : '&background=0'}
+                    muted           = ${props.muted ? '&muted=1' : ''}
+                    playsinline     = ${props.playsinline ? '' : '&playsinline=0'}
+                    transparent     = ${props.transparent ? '' : '&transparent=0'}
+                    previewTitle    = ${props.previewTitle ? '' : '&title=0'}
+                    previewByline   = ${props.previewByline ? '' : '&byline=0'}
+                    previewPortrait = ${props.previewPortrait ? '' : '&portrait=0'}
+                }
+            }
+            isYoutube {
+                condition = ${props.platform == 'youtube'}
+                renderer = 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 : ''}
+                }
+            }
+        }
+    }
+}
diff --git a/Resources/Private/Fusion/Component/Video/Fragment/Vimeo.fusion b/Resources/Private/Fusion/Component/Video/Fragment/Vimeo.fusion
@@ -1,39 +1,8 @@
 prototype(Jonnitto.PrettyEmbedVideoPlatforms:Component.Video.Fragment.Vimeo) < prototype(Neos.Fusion:Component) {
     renderer = Neos.Fusion:Tag {
         tagName = ${props.live ? 'a' : 'div'}
-        attributes {
-            id = ${props.id}
-            class = Carbon.Eel:BEM {
-                block = 'jonnitto-prettyembed'
-                modifier = Neos.Fusion:DataStructure {
-                    vimeo = true
-                    iframe = true
-                    ratio = ${!!props.force16to9 || !!props.hasRatioAndNoLightboxWithPreserveAspectRatio}
-                    type = ${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-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'
-                loop            = ${props.loop ? '&loop=1' : ''}
-                color           = ${props.color ? '&color=' + String.replace(props.color, '#', '') : ''}
-                autopause       = ${props.autopause ? '' : '&autopause=0'}
-                background      = ${props.background ? '' : '&background=0'}
-                muted           = ${props.muted ? '&muted=1' : ''}
-                playsinline     = ${props.playsinline ? '' : '&playsinline=0'}
-                transparent     = ${props.transparent ? '' : '&transparent=0'}
-                previewTitle    = ${props.previewTitle ? '' : '&title=0'}
-                previewByline   = ${props.previewByline ? '' : '&byline=0'}
-                previewPortrait = ${props.previewPortrait ? '' : '&portrait=0'}
-            }
+        attributes = Jonnitto.PrettyEmbedVideoPlatforms:Component.Attributes {
+             @apply.props = ${props}
         }
         content = afx`
             {props.playButton}

diff --git a/Resources/Private/Fusion/Component/Video/Fragment/Youtube.fusion b/Resources/Private/Fusion/Component/Video/Fragment/Youtube.fusion
@@ -1,38 +1,8 @@
 prototype(Jonnitto.PrettyEmbedVideoPlatforms:Component.Video.Fragment.Youtube) < prototype(Neos.Fusion:Component) {
     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-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 : ''}
-            }
+        attributes = Jonnitto.PrettyEmbedVideoPlatforms:Component.Attributes {
+             @apply.props = ${props}
         }
         content = afx`
             {props.playButton}