Update: Use Carbon.FileLoader

Resources/Private/Fusion/Helper/Assets.fusion

@@ -0,0 +1,29 @@
+prototype(Jonnitto.PrettyEmbed:Assets) < prototype(Neos.Fusion:Component) {
+    @propTypes {
+        player = ${PropTypes.oneOf(['YouTube', 'Vimeo', 'Video', 'Audio']).isRequired}
+        gdprHandling = ${PropTypes.oneOf([true, false, 'popup'])}
+        includeAlpineJsCheck = ${PropTypes.boolean}
+        inBackend = ${PropTypes.boolean}
+    }
+
+    debug = ${Configuration.setting('Jonnitto.PrettyEmbed.debug')}
+    includeAssets = ${Configuration.setting('Jonnitto.PrettyEmbed.includeAssets')}
+    includeAlpineJsCheck = ${Configuration.setting('Jonnitto.PrettyEmbed.includeAlpineJsCheck')}
+    inBackend = ${node.context.inBackend && node.context.currentRenderingMode.edit}
+
+    // This decides which file to load
+    player = null
+
+    renderer = Carbon.FileLoader:Component {
+        package = 'Jonnitto.PrettyEmbedHelper'
+        css = ${props.includeAssets.css ? 'Main.css' : null}
+        js = ${[props.inBackend ? 'Backend.js' : null, props.debug ? 'Debug.js' : null]}
+        mjs = Neos.Fusion:DataStructure {
+            gdprPlugin = ${props.gdprHandling == true ? 'Consent.js' : null}
+            magicPlugin = ${props.player == 'Video' || props.player == 'Audio' || props.gdprHandling != 'Popup' ? 'Methods.js' : null}
+            popupPlugin = ${props.gdprHandling ? 'Popup.js' : null}
+            pluginBasedOnPlayer = ${props.player == 'Video' || props.player == 'Audio' ? 'Media.js' : (props.player + '.js')}
+            alpineJsCheck= ${props.includeAlpineJsCheck ? 'AlpineCheck.js' : null}
+        }
+    }
+}

Resources/Private/Fusion/Presentation/Audio.fusion

@@ -23,6 +23,14 @@ prototype(Jonnitto.PrettyEmbed:Presentation.Audio) < prototype(Neos.Fusion:Compo
 
     @if.checkAudio = ${this.content}
 
+    // @internal Move to @private if minimal Neos requirement is 8.3 or higher
+    _fileLoader = ${{debug: this.debug}}
+    [email protected] = Jonnitto.PrettyEmbed:Assets {
+        player = 'Audio'
+        debug = ${value.debug}
+    }
+    _fileLoaderAsAttributes = ${!Type.isString(this._fileLoader)}
+
     renderer = afx`
         <Jonnitto.PrettyEmbed:Presenation.Wrapper wrapper={props.wrapper}>
             <div
@@ -31,8 +39,9 @@ prototype(Jonnitto.PrettyEmbed:Presentation.Audio) < prototype(Neos.Fusion:Compo
                 aria-label={props.label}
                 id={props.id}
                 class={Carbon.String.merge(props.class, BEM.modifier('jonnitto-prettyembed', 'audio'))}
+                {...(props._fileLoaderAsAttributes ? props._fileLoader : {})}
             >
-                <Jonnitto.PrettyEmbed:Assets player="Audio" debug={props.debug} />
+                {props._fileLoaderAsAttributes ? '' : props._fileLoader}
                 {props.customControls}
                 <audio
                     x-prettyembedmedia:media

Resources/Private/Fusion/Presentation/Components/Iframe.fusion

@@ -50,7 +50,16 @@ prototype(Jonnitto.PrettyEmbed:Presentation.Iframe) < prototype(Neos.Fusion:Comp
         checkYouTube = ${this.player == 'YouTube' ? (this.videoID && this.href && this.embedHref) : true}
         checkPreviewImage = ${this.poster || this.preview}
     }
+
+    // @internal Move to @private if minimal Neos requirement is 8.3 or higher
     _alwaysOpenInPopup = ${this.gdprHandling == 'popup'}
+    _fileLoader = ${{debug: this.debug, player: this.player, gdprHandling: this.gdprHandling}}
+    [email protected] = Jonnitto.PrettyEmbed:Assets {
+        player = ${value.player}
+        gdprHandling = ${value.gdprHandling}
+        debug = ${value.debug}
+    }
+    _fileLoaderAsAttributes = ${!Type.isString(this._fileLoader)}
 
     renderer = afx`
         <Jonnitto.PrettyEmbed:Presenation.Wrapper wrapper={props.wrapper}>
@@ -78,12 +87,9 @@ prototype(Jonnitto.PrettyEmbed:Presentation.Iframe) < prototype(Neos.Fusion:Comp
                 id={props.id}
                 class={Carbon.String.merge(props.class, BEM.modifier('jonnitto-prettyembed', String.toLowerCase(props.player)), props.setAspectRatioClass && 'jonnitto-prettyembed-ratio')}
                 style={props.aspectRatio ? '--aspect-ratio:' + props.aspectRatio :  null}
+                {...(props._fileLoaderAsAttributes ? props._fileLoader : {})}
             >
-                <Jonnitto.PrettyEmbed:Assets
-                    player={props.player}
-                    gdprHandling={props.gdprHandling}
-                    debug={props.debug}
-                />
+                {props._fileLoaderAsAttributes ? '' : props._fileLoader}
                 <Jonnitto.PrettyEmbed:Presentation.Button.Play
                     @if={!props._alwaysOpenInPopup}
                     show={props.controls ? "!loaded" : "!playing"}

Resources/Private/Fusion/Presentation/Video.fusion

@@ -62,6 +62,15 @@ prototype(Jonnitto.PrettyEmbed:Presentation.Video) < prototype(Neos.Fusion:Compo
                 {props.streaming ? '' : props.content}
             </video>
         `
+
+        // @internal Move to @private if minimal Neos requirement is 8.3 or higher
+        _fileLoader = Jonnitto.PrettyEmbed:Assets {
+            player = 'Video'
+            debug = ${props.debug}
+        }
+        _fileLoaderAsAttributes = ${!Type.isString(this._fileLoader)}
+
+
         renderer = afx`
             <Jonnitto.PrettyEmbed:Presenation.Wrapper wrapper={props.wrapper}>
                 <div
@@ -73,8 +82,9 @@ prototype(Jonnitto.PrettyEmbed:Presentation.Video) < prototype(Neos.Fusion:Compo
                     aria-label={props.label}
                     id={props.id}
                     class={Carbon.String.merge(props.class, BEM.modifier('jonnitto-prettyembed', 'video'))}
+                    {...(props._fileLoaderAsAttributes ? props._fileLoader : {})}
                 >
-                    <Jonnitto.PrettyEmbed:Assets player="Video" debug={props.debug} />
+                    {props._fileLoaderAsAttributes ? '' : props._fileLoader}
                     <Jonnitto.PrettyEmbed:Presentation.Preview
                         show={props.lightbox ? null : '!loaded'}
                         content={props.preview}

composer.json

@@ -29,6 +29,7 @@
         "neos/neos": "^7.3 || ^8.0",
         "neos/fusion-afx": "^7.3 || ^8.0",
         "sitegeist/slipstream": "^2.1.6",
+        "carbon/fileloader": "^0.1",
         "carbon/notification": "^2.4",
         "carbon/eel": "^2.8"
     },