hr-design-system-handlebars 1.62.0 → 1.63.0

package/src/stories/views/components/externalService/externalServiceDs.feature.js

@@ -1,4 +1,6 @@
 import SettingsCookie from './globalSettingsCookie.subfeature'
+import DataWrapperContentRefresher from './dataWrapperContentRefresher.subfeature'
+import DataWrapperNoResponsiveIframe from './dataWrapperNoResponsiveIframe.subfeature'
 import {
     fireEvent,
     hr$,
@@ -12,9 +14,9 @@ import {
 } from 'hrQuery'
 
 const ExternalService = function (context) {
-    const { options } = context,
-        { element: rootElement } = context,
-        rootParent = rootElement.parentNode
+    const   { options } = context,
+            { element: rootElement } = context,
+            rootParent = rootElement.parentNode
     let dataPolicyBox = hr$('.js-datapolicy', rootElement)[0]
     const dataPolicyBoxHTML = typeof dataPolicyBox !== 'undefined' ? dataPolicyBox.outerHTML : '',
         contentSettingsButton = hr$('.js-content-settings-button', rootParent)[0],
@@ -33,22 +35,6 @@ const ExternalService = function (context) {
         settingsCookie,
         isExternalServiceLoaded = false
 
-    const syncAppOptionsToSettingsCookie = function () {
-        if (getJSONCookie('datapolicy')) {
-            let dataPolicyCookie = getJSONCookie('datapolicy') || {}
-            let objArray = Object.entries(dataPolicyCookie)
-            objArray.forEach(([key, value]) => {
-                settingsCookie.setCookieForOptions(key, value)
-            })
-        }
-    }
-
-    const setWhitelistServicesForInitialApp = function () {
-        let whitelist = ['ard_mediathek', 'arte_concert', 'arte_concert_new', 'datawrapper_cdn']
-        for (let i = 0; i < whitelist.length; ++i) {
-            settingsCookie.setCookieForDataPolicy(whitelist[i], true)
-        }
-    }
 
     const embedExternalService = function (callback) {
         $.ajax({
@@ -84,66 +70,7 @@ const ExternalService = function (context) {
             })
     }
 
-    const handleDatapolicy = function (event) {
-        if (acceptAlwaysCheckbox.checked == true) {
-            fireEvent('hr:externalService-activate-' + id)
-            settingsCookie.setCookieForOptions(id)
-            if (isWebview) {
-                settingsCookie.setCookieForDataPolicy(id)
-            }
-        } else {
-            loadServiceWithDataPolicyButton()
-            console.log('External Service once loaded - ' + id)
-        }
-        event.stopPropagation()
-    }
-    const loadServiceWithDataPolicyButton = function () {
-        if (rootElement.children[0].classList.contains('js-datapolicy')) {
-            insertExternalService()
-            isExternalServiceLoaded = true
-            toggleContentSettingsButton()
-        }
-    }
-    const toggleContentSettingsButton = function () {
-        if (isExternalServiceLoaded) {
-            contentSettingsButton.classList.remove('hideExtButton')
-        } else {
-            contentSettingsButton.classList.add('hideExtButton')
-        }
-        console.log('Toggle den Einstellungsbutton außerhalb weil ' + isExternalServiceLoaded)
-    }
-
-    const removeDatapolicyBox = function () {
-        rootElement.innerHTML = ''
-        rootElement.classList.remove('c-dataPolicy')
-    }
-
-    const initDataPolicy = function () {
-        if (dataPolicyCheck) {
-            settingsCookie = new SettingsCookie()
-            acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
-            listen('click', handleDatapolicy, acceptButton)
-            if (isWebview) {
-                if (settingsCookie.isDataPolicyCookieAccepted(id)) {
-                    loadServiceWithDataPolicyButton()
-                } else {
-                    dataPolicyBox.style.visibility = 'visible'
-                }
-            } else {
-                if (settingsCookie.isSettingsCookieAccepted(id)) {
-                    loadServiceWithDataPolicyButton()
-                } else {
-                    dataPolicyBox.style.visibility = 'visible'
-                }
-            }
-            listen('hr:externalService-activate-' + id, loadServiceWithDataPolicyButton)
-            listen('hr:externalService-deactivate-' + id, removeExternalService)
-        } else {
-            insertExternalService()
-        }
-    }
-
-    const insertExternalService = function () {
+   const insertExternalService = function () {
         switch (embedType) {
             case 'js':
                 switch (id) {
@@ -197,41 +124,21 @@ const ExternalService = function (context) {
         rootElement.appendChild(script)
     }
 
-    const createDataWrapperUniqueID = function () {
-        return Math.random()
-            .toString(36)
-            .replace(/[^a-z]+/g, '')
-            .substr(2, 10)
-    }
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
-        var uniqueID = createDataWrapperUniqueID()
-        if (iFrameConfig.noResponsiveIframe == 'true') {
-            var parentDiv = document.createElement('div')
-            parentDiv.className = 'copytext__scrollWrapper'
-            var div = document.createElement('div')
-            if (iFrameConfig.aspectRatio === undefined) {
-                div.className = 'noaspect_datawrapper_cdn'
-                div.style.height = iFrameConfig.fixedHeight + 'px'
-                div.style.width = '100%'
-            } else {
-                div.className = 'ar--' + iFrameConfig.aspectRatio + ' datawrapper_cdn'
-            }
-            var iframe = document.createElement('iframe')
-            iframe.className = 'ar_iframe datawrapper_cdn'
-            iframe.setAttribute('id', 'i_frame')
-            iframe.setAttribute('data-isloaded', '0')
-            iframe.setAttribute('webkitallowfullscreen', '')
-            iframe.setAttribute('mozallowfullscreen', '')
-            iframe.setAttribute('allowfullscreen', '')
-            iframe.setAttribute('scrolling', 'no')
-            iframe.setAttribute('frameborder', '0')
-            iframe.src = embedCode
+        var uniqueID = function () {
+            return Math.random()
+            .toString(36)
+            .replace(/[^a-z]+/g, '')
+            .substring(2, 10)
+        }
+        let contentRefresher = new DataWrapperContentRefresher(context, uniqueID)
+        let noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, embedCode)
 
-            div.appendChild(iframe)
-            parentDiv.appendChild(div)
-            rootElement.appendChild(parentDiv)
-        } else {
+        if (iFrameConfig.noResponsiveIframe == 'true') {
+            noResponsiveIframe.createNoResponsiveIframe(getAspectRatioClass())
+        } 
+        else {
             var iframe = document.createElement('iframe')
             iframe.className = 'dataWrapper-embed'
             iframe.style.width = '0'
@@ -252,78 +159,7 @@ const ExternalService = function (context) {
                 true
             )
             if (iFrameConfig.refreshContent == 'true') {
-                var remainingTime
-                var timer
-                var iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
-                var divCounter = document.createElement('div')
-                var divOverlay = document.createElement('div')
-                var divTextOverlay = document.createElement('div')
-                divOverlay.id = 'overlay' + uniqueID
-                divOverlay.style.position = 'absolute'
-                divOverlay.style.top = '0'
-                divOverlay.style.display = 'none'
-                divOverlay.style.alignItems = 'center'
-                divOverlay.style.justifyContent = 'center'
-                divOverlay.style.backgroundColor = '#fff'
-                divOverlay.style.width = '100%'
-                divOverlay.style.height = 'calc(100% - 36px)'
-                divOverlay.style.backgroundColor = '#d8e9f6'
-                divTextOverlay.innerHTML = 'Lade Inhalt neu...'
-                divTextOverlay.style.backgroundColor = '#005293'
-                divTextOverlay.style.padding = '8px'
-                divTextOverlay.style.color = '#fff'
-                divTextOverlay.style.fontWeight = '800'
-                divTextOverlay.style.fontFamily = 'RobotoSlab'
-                divTextOverlay.style.borderRadius = '6px 6px 6px 6px'
-                divOverlay.appendChild(divTextOverlay)
-                divCounter.id = 'counter' + uniqueID
-                divCounter.style.backgroundColor = '#006dc1'
-                divCounter.style.color = '#fff'
-                divCounter.style.fontSize = '12px'
-                divCounter.style.padding = '8px'
-                divCounter.style.borderRadius = '0 0 4px 4px'
-                rootElement.style.position = 'relative'
-                rootElement.appendChild(divCounter)
-                rootElement.appendChild(divOverlay)
-
-                const refreshIframe = function () {
-                    console.log('Reload')
-                    iframeRefresh.style.opacity = '0'
-                    iframeRefresh.src =
-                        iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
-                    clearInterval(timer)
-                }
-                const startCountdown = function () {
-                    remainingTime = Number(iFrameConfig.refreshIntervall)
-                    setTimeout(function () {
-                        iframeRefresh.style.opacity = '1'
-                        document.getElementById('overlay' + uniqueID).style.display = 'none'
-                    }, 1000)
-                    timer = setInterval(function () {
-                        checkTimer()
-                    }, 1000)
-                }
-                const checkTimer = function () {
-                    if (remainingTime >= 0) {
-                        document.getElementById('counter' + uniqueID).innerHTML =
-                            'Dieser Inhalt wird automatisch aktualisiert in ' +
-                            secondsToTimeString(remainingTime) +
-                            ' Min.'
-                        remainingTime -= 1
-                        if (remainingTime == -1) {
-                            document.getElementById('overlay' + uniqueID).style.display = 'flex'
-                            document.getElementById('counter' + uniqueID).innerHTML =
-                                'Zeitintervall wird neu gestartet...'
-                        }
-                    } else {
-                        refreshIframe()
-                        startCountdown()
-                    }
-                }
-                const secondsToTimeString = function (seconds) {
-                    return new Date(seconds * 1000).toISOString().substr(14, 5)
-                }
-                startCountdown()
+                contentRefresher.createRefresher()
             }
         }
     }
@@ -373,7 +209,7 @@ const ExternalService = function (context) {
             embedCode +
             "?utm_source=ig_embed&amp;utm_campaign=loading'" +
             "data-instgrm-version='14'" +
-            "style='background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:660px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);' >" +
+            "style='background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:724px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);' >" +
             '</blockquote>'
         replaceAnimated(rootElement, instagramEmbedCode, false, reloadInstagramEmbed)
     }
@@ -415,6 +251,27 @@ const ExternalService = function (context) {
         }, 250)
     }
 
+    const getAspectRatioClass = function () {
+        switch (iFrameConfig.aspectRatio) {
+            case '16x9':
+                return "ar-16-9"
+            case '16x7':
+                return "ar-16-7"
+            case '4x3':
+                return "ar-4-3"
+            case '100x27':
+                return "ar-100-27"
+            case '100':
+                return "ar-1-1"                
+            case '9x16':
+                return "ar-9-16"
+            case '7x16':
+                return "ar-7-16"
+            default:
+                return "ar-16-9"
+        }   
+    }
+
     const loadIframe = function () {
         console.log('load iframe ' + id)
         iframe =
@@ -425,13 +282,13 @@ const ExternalService = function (context) {
             "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
         if (iFrameConfig.aspectRatio) {
             iframe =
-                "<div class='copytext__scrollWrapper'><div class='ar--" +
-                iFrameConfig.aspectRatio +
+                "<div class='copytext__scrollWrapper'><div class='" +
+                getAspectRatioClass() +
                 ' ' +
                 id +
                 "'><iframe id='i_frame' data-isloaded='0' src='" +
                 embedCode +
-                "' frameborder='0' class='" +
+                "' frameborder='0' class='w-full h-full " +
                 iFrameConfig.heightClass +
                 ' ' +
                 id +
@@ -442,14 +299,14 @@ const ExternalService = function (context) {
                 iframe =
                     "<div class='copytext__scrollWrapper -fixedHeight' style='height:" +
                     iFrameConfig.fixedHeight +
-                    "px'><iframe data-isloaded='0' src='" +
+                    "px'><iframe data-isloaded='0' class='w-full h-full' src='" +
                     embedCode +
                     "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             } else {
                 iframe =
                     "<div class='copytext__scrollWrapper " +
                     id +
-                    "'><iframe data-isloaded='0' src='" +
+                    "'><iframe data-isloaded='0' class='w-full h-full' src='" +
                     embedCode +
                     "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             }
@@ -458,6 +315,66 @@ const ExternalService = function (context) {
         replaceAnimated(rootElement, iframe, false)
     }
 
+    const initDataPolicy = function () {
+        if (dataPolicyCheck) {
+            settingsCookie = new SettingsCookie()
+            acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
+            listen('click', handleDatapolicy, acceptButton)
+            if (isWebview) {
+                if (settingsCookie.isDataPolicyCookieAccepted(id)) {
+                    loadServiceWithDataPolicyButton()
+                } else {
+                    dataPolicyBox.style.visibility = 'visible'
+                }
+            } else {
+                if (settingsCookie.isSettingsCookieAccepted(id)) {
+                    loadServiceWithDataPolicyButton()
+                } else {
+                    dataPolicyBox.style.visibility = 'visible'
+                }
+            }
+            listen('hr:externalService-activate-' + id, loadServiceWithDataPolicyButton)
+            listen('hr:externalService-deactivate-' + id, removeExternalService)
+        } else {
+            insertExternalService()
+        }
+    }
+
+    const handleDatapolicy = function (event) {
+        if (acceptAlwaysCheckbox.checked == true) {
+            fireEvent('hr:externalService-activate-' + id)
+            settingsCookie.setCookieForOptions(id)
+            if (isWebview) {
+                settingsCookie.setCookieForDataPolicy(id)
+            }
+        } else {
+            loadServiceWithDataPolicyButton()
+            console.log('External Service once loaded - ' + id)
+        }
+        event.stopPropagation()
+    }
+
+    const loadServiceWithDataPolicyButton = function () {
+        if (rootElement.children[0].classList.contains('js-datapolicy')) {
+            insertExternalService()
+            isExternalServiceLoaded = true
+            toggleContentSettingsButton()
+        }
+    }
+    const toggleContentSettingsButton = function () {
+        if (isExternalServiceLoaded) {
+            contentSettingsButton.classList.remove('hidden')
+        } else {
+            contentSettingsButton.classList.add('hidden')
+        }
+        console.log('Toggle den Einstellungsbutton außerhalb weil ' + isExternalServiceLoaded)
+    }
+
+    const removeDatapolicyBox = function () {
+        rootElement.innerHTML = ''
+        rootElement.classList.remove('c-dataPolicy')
+    }
+
     const removeExternalService = function () {
         replaceAnimated(rootElement, dataPolicyBoxHTML, true, reinitiateDataPolicyBox)
     }
@@ -471,6 +388,23 @@ const ExternalService = function (context) {
         initDataPolicy()
         toggleContentSettingsButton()
     }
+
+    const syncAppOptionsToSettingsCookie = function () {
+        if (getJSONCookie('datapolicy')) {
+            let dataPolicyCookie = getJSONCookie('datapolicy') || {}
+            let objArray = Object.entries(dataPolicyCookie)
+            objArray.forEach(([key, value]) => {
+                settingsCookie.setCookieForOptions(key, value)
+            })
+        }
+    }
+
+    const setWhitelistServicesForInitialApp = function () {
+        let whitelist = ['ard_mediathek', 'arte_concert', 'arte_concert_new', 'datawrapper_cdn']
+        for (let i = 0; i < whitelist.length; ++i) {
+            settingsCookie.setCookieForDataPolicy(whitelist[i], true)
+        }
+    }
     const resetCheckboxForPermanentService = function () {
         /*Die Autocompletion des Browsers merkt sich die Zustände von Formularelementen nach einem Refresh, das wird hier hart zurückgesetzt*/
         var clist = document.getElementsByClassName('js-dataPolicy-acceptPermanentely')

package/src/stories/views/components/externalService/external_service.data.js

@@ -1,5 +1,5 @@
 import structuredClone from 'core-js-pure/actual/structured-clone'
-import externalServiceContent from './fixtures/external_service.json'
+import externalServiceContent from './fixtures/external_service_with_datapolicy.json'
 
 const ExternalServiceContent =  structuredClone(
     Object.assign({}, externalServiceContent)

package/src/stories/views/components/externalService/external_service.hbs

@@ -1,17 +1,35 @@
-<div class="grid">
-        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
-        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-             data-hr-external-service='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": true,"iFrameConfig": {"heightClass":"ar_iframe"{{#if
-                 this.fixedHeight}},"fixedHeight":"{{this.fixedHeight}}", "fixedHeightClass":"-fixedHeight"{{else}},{{#if
-                 this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"}}'>
-            {{~> components/externalService/external_service_data_policy ~}}
+{{#if this.externalServiceConfig.makeConfigurable}}
+    
+    {{> components/externalService/external_service_with_datapolicy_check }}
+
+{{else}}
+    
+    {{#if this.serviceUrl}}
+        <div class="clear-both mt-10">
+            <span class="sr-only">{{loca "story_externalservice_intro_sr" }}</span>    
+            {{#if this.externalServiceConfig.embedAsIFrame}}              
+                    
+                <div class="{{#if this.fixedHeight}}overflow-y-hidden{{else}}overflow-hidden{{/if}}" {{#if this.fixedHeight}}style="height:{{this.fixedHeight}}px;"{{/if}}>
+                    {{#unless this.fixedHeight}}<div class="{{~inline-switch this.aspectRatio  '["16x9","16x7","4x3","100x27","100","9x16","7x16"]' '["ar-16-9","ar-16-7","ar-4-3","ar-100-27","ar-1-1","ar-9-16","ar-7-16","ar-16-9"]'~}}">{{/unless}}
+                        <iframe frameborder="0" width="100%" height="100%"
+                                src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen
+                                allowfullscreen scrolling='no'>
+                        </iframe>
+                    {{#unless this.fixedHeight}}</div>{{/unless}}                        
+                </div>
+            
+            {{else}}
+            
+                <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": false, "iFrameConfig":{}}'>
+                </div>
+                
+            {{/if}}
+                
+            {{~> components/externalService/components/external_service_caption ~}}
+            
+            <span class="sr-only">{{loca "story_externalservice_outro_sr" }}</span>    
         </div>
-        {{~> components/externalService/external_service_caption ~}}
-        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
-        <div >
-            <div class="float-right">
-            {{~> components/externalService/external_service_settings_button ~}}
-            </div>
-        </div>
-</div>
-{{~> components/dataPolicySettings/data_policy_settings ~}}
+    {{/if}}
+
+{{/if}}

package/src/stories/views/components/externalService/external_service.stories.js

@@ -1,7 +1,7 @@
 import { 
     ExternalServiceContent
 } from './external_service.data.js'
-import externalService from './external_service.hbs'
+import externalService from './external_service_with_datapolicy_check.hbs'
 
 const TemplatePageExternalService = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!

package/src/stories/views/components/externalService/external_service_with_datapolicy_check.hbs

@@ -0,0 +1,16 @@
+<div class="grid clear-both mt-10">
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": true,"iFrameConfig": {"heightClass":"ar_iframe"{{#if
+                 this.fixedHeight}},"fixedHeight":"{{this.fixedHeight}}", "fixedHeightClass":"-fixedHeight"{{else}},{{#if
+                 this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"}}'>
+            {{~> components/externalService/components/external_service_data_policy ~}}
+        </div>
+        {{~> components/externalService/components/external_service_caption ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+        <div class="hidden js-content-settings-button">
+            <div class="float-right">
+            {{~> components/externalService/components/external_service_settings_button ~}}
+            </div>
+        </div>
+</div>

package/src/stories/views/components/externalService/fixtures/external_service_with_datapolicy.json

@@ -0,0 +1,166 @@
+{
+    "ARD_Mediathek_Video": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": true,
+            "externalServiceId": "ard_mediathek",
+            "externalServiceEmbedType": "iFrame",
+            "externalServiceName": "ARD Mediathek (Video)"
+        },
+        "serviceUrl": "https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "ARTE_concert_new": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": true,
+            "externalServiceId": "arte_concert_new",
+            "externalServiceEmbedType": "iFrame",
+            "externalServiceName": "Arte Concert 2.0"
+        },
+        "serviceUrl": "https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0",
+        "aspectRatio": "16x9",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },      
+    "Datawrapper_CDN": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "datawrapper_cdn",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "Datawrapper (Datengrafik)"
+        },
+        "serviceUrl": "https://datawrapper.dwcdn.net/IC3Xn/1/",
+        "fixedHeight": "380",
+        "setResponsiveIframe": true,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "Esri": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": true,
+            "externalServiceId": "esri",
+            "externalServiceEmbedType": "iFrame",
+            "externalServiceName": "Esri (Notfallkarte)"
+        },
+        "serviceUrl": "https://arcg.is/1aW0au0",
+        "aspectRatio": "100",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": "",
+        "externalServiceCaption": "Notfallkarte"
+    },
+    "Facebook": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "facebook-post",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "Facebook"
+        },
+        "serviceUrl": "https://www.facebook.com/v10.0/plugins/post.php?app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df000f487949b618db%26domain%3Dhessenschau-dev-red.hr.de%26is_canvas%3Dfalse%26origin%3Dhttps%253A%252F%252Fhessenschau-dev-red.hr.de%252Ffac8e6f0732031392%26relation%3Dparent.parent&container_width=1&href=https%3A%2F%2Fwww.facebook.com%2FZooFFM%2Fposts%2F1926440010874354&lazy=true&locale=de_DE&sdk=joey&width=660",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "Flourish": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": true,
+            "externalServiceId": "flourish",
+            "externalServiceEmbedType": "iFrame",
+            "externalServiceName": "Flourish (Datengrafik)"
+        },
+        "serviceUrl": "https://public.flourish.studio/story/18361/embed",
+        "fixedHeight": "550",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "Giphy": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": true,
+            "externalServiceId": "giphy",
+            "externalServiceEmbedType": "iFrame",
+            "externalServiceName": "Giphy (animiertes GIF)"
+        },
+        "serviceUrl": "https://giphy.com/embed/ONxw4niC96zwk",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "Instagram": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "instagram",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "Instagram"
+        },
+        "serviceUrl": "https://www.instagram.com/p/CjZzvIOs7PK/embed/captioned/?cr=1&v=14&wp=658&rd=https%3A%2F%2Fhessenschau-dev-red.hr.de&rp=%2Ftest-externe-dienste-v1%2Cexternedienste-100.html#%7B%22ci%22%3A0%2C%22os%22%3A5421.799999999814%2C%22ls%22%3A4354.700000000186%2C%22le%22%3A4357.600000000559%7D",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "Twitter": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "twitter-post",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "X"
+        },
+        "serviceUrl": "https://platform.twitter.com/embed/Tweet.html?creatorScreenName=hessenschau&creatorUserId=17360630&dnt=false&embedId=twitter-widget-0&features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&frame=false&hideCard=false&hideThread=false&id=1578122540362465299&lang=de&origin=https%3A%2F%2Fhessenschau-dev-red.hr.de%2Ftest-externe-dienste-v1%2Cexternedienste-100.html&sessionId=56b29ff8ee6fd214d71e8ef5924dbf80fbc2d6cd&siteScreenName=hessenschau&siteUserId=17360630&theme=light&widgetsVersion=2615f7e52b7e0%3A1702314776716&width=550px",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "Vimeo": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": true,
+            "externalServiceId": "vimeo",
+            "externalServiceEmbedType": "iFrame",
+            "externalServiceName": "Vimeo (Video)"
+        },
+        "serviceUrl": "https://player.vimeo.com/video/438111654",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "Youtube": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": true,
+            "externalServiceId": "youtube",
+            "externalServiceEmbedType": "iFrame",
+            "externalServiceName": "YouTube (Video)"
+        },
+        "serviceUrl": "https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0",
+        "aspectRatio": "16x9",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "Youtube_360": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": true,
+            "externalServiceId": "youtube360",
+            "externalServiceEmbedType": "iFrame",
+            "externalServiceName": "YouTube 360 (360° Video)"
+        },
+        "serviceUrl": "https://www.youtube-nocookie.com/embed/yT1pyf9oXGk",
+        "aspectRatio": "16x9",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": "",
+        "externalServiceCaption": "Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"
+    }                                                
+}