hr-design-system-handlebars 0.50.8 → 0.51.0

package/.storybook/main.js

@@ -36,9 +36,9 @@ module.exports = {
             components: path.resolve(__dirname, '../src/stories/views/components'),
             base: path.resolve(__dirname, '../src/stories/views/base'),
             tailwind$: path.resolve(__dirname, '../src/assets/tailwind.css'),
-            hrQueryDs$: path.resolve(
+            hrQuery$: path.resolve(
                 __dirname,
-                '../src/stories/views/components/generic/hrQueryDs.js'
+                '../src/stories/views/components/generic/hrQuery.subfeature.js'
             ),
             initializer$: path.resolve(
                 __dirname,

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.51.0 (Wed Jul 27 2022)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 1567 [#286](https://github.com/mumprod/hr-design-system-handlebars/pull/286) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.50.8 (Wed Jul 27 2022)
 
 #### 🐛 Bug Fix

package/build/scripts/build.js

@@ -7,4 +7,5 @@ const run = (cmd) => execSync(cmd, { stdio: 'inherit', cwd: root })
 // Copy hbs files into the dist folder
 run(`npx copyfiles \"./src/index.js\" dist --up=1`)
 run(`npx copyfiles \"./src/stories/views/**/*.{js,hbs}\" dist --up=2`)
+run(`npx copyfiles \"./src/stories/views/**/*Ds.{feature,subfeature}.js\" dist/assets/js  --up=2`)
 run(`npx copyfiles \"./src/assets/**/*.{woff,svg}\" dist --up=1`)

package/dist/assets/js/views/components/audio/audioElementDs.subfeature.js

@@ -0,0 +1,127 @@
+import { fireEvent, hr$, listen } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+import ATIMediaHelper from 'base/tracking/atiMediaHelper.subfeature'
+
+const AudioElement = function (options, rootElement) {
+    'use strict'
+
+    const audio = hr$('audio', rootElement)[0],
+        downloadInfo = hr$('.audioElement__downloadInfo', rootElement)[0],
+        downloadText = hr$('.audioElement__downloadText', rootElement)[0],
+        mediaTracking = new ATIMediaHelper(
+            'audio',
+            options.mediaMetadata.ati.pageName,
+            options.mediaMetadata.ati.secondLevelId,
+            options.mediaMetadata.agf.length,
+            options.mediaMetadata.ati.documentName,
+            options.mediaMetadata.ati.documentType,
+            options.mediaMetadata.ati.documentDate,
+            options.mediaMetadata.ati.chapter
+        )
+    let autoplay = options.autoplay || false,
+        isPlaying = false
+
+    const errorHandling = function (e) {
+        console.dir(audio)
+
+        if (audio.canPlayType && audio.canPlayType('audio/mpeg').length <= 0) {
+            showPlaybackNotSupported()
+            return
+        }
+
+        switch (audio.networkState) {
+            //file not found - 404
+            case HTMLMediaElement.NETWORK_NO_SOURCE:
+                showFileNotFound()
+                return
+
+            default:
+                break
+        }
+
+        //falls es mit einem event aufgerufen wurde
+        //und bis hierhin kam gibt es einen generellen fehler
+        if (e) {
+            showGeneralError()
+            return
+        }
+
+        return
+    }
+    const showGeneralError = function () {
+        console.log('Audio: Error')
+        downloadText.innerHTML = options.playbackError
+        rootElement.insertBefore(downloadInfo, rootElement.firstChild)
+        downloadInfo.style.display = 'inline-block'
+
+        uxAction('audioPlayer', 'generalError')
+    }
+    const showFileNotFound = function () {
+        console.log('Audio: File Not Found')
+        downloadInfo.innerHTML = options.playbackFileNotFound
+        rootElement.insertBefore(downloadInfo, rootElement.firstChild)
+        downloadInfo.style.display = 'inline-block'
+
+        uxAction('audioPlayer', 'fileNotFound')
+    }
+    const showPlaybackNotSupported = function () {
+        console.log('Audio: Playback unsupported')
+        downloadText.innerHTML = options.playbackUnsupported
+        rootElement.insertBefore(downloadInfo, rootElement.firstChild)
+        downloadInfo.style.display = 'inline-block'
+
+        uxAction('audioPlayer', 'playbackNotSupported')
+    }
+    const shouldIStopPlaying = function (event) {
+        console.log(event.detail)
+        if (event.detail != audio && isPlaying) {
+            audio.pause()
+            pauseAudio(event)
+        }
+    }
+    const startAudio = function (e) {
+        console.log('start')
+        uxAction('audioPlayer', 'audioPlay')
+        mediaTracking.trackInitialMediaPlay()
+        fireEvent('hr:global:stopOtherAVs', audio, true)
+        isPlaying = true
+        const geotag = hr$('.js-geotag', rootElement)[0]
+        if (typeof geotag != 'undefined') {
+            geotag.classList.add('hide')
+        }
+    }
+    const pauseAudio = function (e) {
+        console.log('pause')
+        const ended = e.target.ended
+        isPlaying = false
+        if (!ended) {
+            uxAction('audioPlayer', 'pause')
+        } else {
+            uxAction('audioPlayer', 'ended')
+        }
+    }
+
+    //falls ein fehler auftrat bevor das js, geladen wurde
+    errorHandling()
+
+    listen('error', errorHandling, rootElement)
+    listen('play', startAudio, audio)
+    listen('pause', pauseAudio, audio)
+
+    if (autoplay) {
+        audio.play()
+    }
+
+    listen('hr:global:stopOtherAVs', shouldIStopPlaying)
+
+    return {
+        play: function () {
+            audio.play()
+        },
+        pause: function () {
+            audio.pause()
+        },
+    }
+}
+
+export default AudioElement

package/dist/assets/js/views/components/externalService/trackingCookieDs.subfeature.js

@@ -0,0 +1,37 @@
+import { getJSONCookie, setJSONCookie } from 'hrQuery'
+
+const TrackingCookie = function () {
+    let cookie = {}
+    const trackingCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10 /* 10 years */
+
+    const setCookieForTracking = function (trackingService, state) {
+        if (state == null) {
+            state = true
+        }
+        console.log('Schreibe Cookie: ' + trackingService + ': ' + state)
+        readTrackingCookie()
+        cookie[trackingService] = state
+        writeTrackingCookie()
+    }
+    const isTrackingAccepted = function (trackingService) {
+        readTrackingCookie()
+        return cookie[trackingService] === true
+    }
+    const writeTrackingCookie = function () {
+        setJSONCookie('tracking', cookie, trackingCookieLifetime)
+    }
+    const readTrackingCookie = function () {
+        cookie = getJSONCookie('tracking') || {}
+    }
+    const isTrackingCookieExistent = function (trackingService) {
+        readTrackingCookie()
+        return cookie.hasOwnProperty(trackingService)
+    }
+    return {
+        setCookieForTracking: setCookieForTracking,
+        isTrackingAccepted: isTrackingAccepted,
+        isTrackingCookieExistent: isTrackingCookieExistent,
+    }
+}
+
+export default TrackingCookie

package/dist/assets/js/views/components/mediaplayer/mediaplayerLoaderDs.feature.js

@@ -0,0 +1,98 @@
+import { hr$, listenOnce, fireEvent, listen } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+import VideoOnDemandPlayer from 'components/video/videoOnDemandPlayerDs.subfeature'
+import AudioElement from 'components/audio/audioElementDs.subfeature'
+import VideoLivestream from 'components/video/livestream/videoLivestreamDs.subfeature'
+
+const MediaplayerLoader = function (context) {
+    'use strict'
+
+    const { options } = context,
+        { element: rootElement } = context,
+        type = options.type,
+        position = options.position,
+        teaserSize = options.teaserSize,
+        config = options.config,
+        audioContent = hr$('.js-audioElement__audio', rootElement)[0],
+        rootParent = rootElement.parentNode,
+        mediaplayerButton = hr$('.js-mediaplayer__button', rootParent)[0]
+
+    let avObject = false
+    console.log('MediaplayerLoader', options)
+
+    const unloadPlayer = function () {
+        console.log('video.pause()')
+        avObject.pause()
+    }
+
+    const loadLivestream = function () {
+        if (!avObject) {
+            console.log('load Livestream')
+            avObject = new VideoLivestream(options)
+            uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+            listenOnce('player_colosed', unloadPlayer)
+        } else {
+            console.log('video.play()')
+            listenOnce('player_colosed', unloadPlayer)
+            avObject.play()
+        }
+    }
+
+    const loadOnDemand = function () {
+        if (!avObject) {
+            console.log('load OnDemand')
+            avObject = new VideoOnDemandPlayer(options)
+            uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+            listenOnce('player_colosed', unloadPlayer)
+        } else {
+            console.log('video.play()')
+            listenOnce('player_colosed', unloadPlayer)
+            avObject.play()
+        }
+    }
+
+    const loadAudio = function () {
+        if (!avObject) {
+            console.log('load Audio')
+            avObject = new AudioElement(options, rootElement)
+            uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+            listenOnce('player_colosed', unloadPlayer)
+        } else {
+            console.log('Audio.play()')
+            listenOnce('player_colosed', unloadPlayer)
+            avObject.play()
+        }
+    }
+
+    switch (type) {
+        case 'live':
+            console.log('live')
+            if (position === 'teaser') {
+                listen('click', loadLivestream, mediaplayerButton)
+            } else {
+                loadLivestream()
+            }
+            break
+
+        case 'ondemand':
+            console.log('ondemand')
+            if (position === 'teaser') {
+                // listenOnce('click', loadOnDemand, mediaplayerButton)
+                listen('click', loadOnDemand, mediaplayerButton)
+            } else {
+                loadOnDemand()
+            }
+            break
+
+        case 'audio':
+            console.log('audio')
+            if (position === 'teaser') {
+                listen('click', loadAudio, mediaplayerButton)
+            } else {
+                audioContent.classList.remove('hide')
+                new AudioElement(options, rootElement)
+            }
+            break
+    }
+}
+export default MediaplayerLoader

package/dist/assets/js/views/components/video/livestream/videoLivestreamDs.subfeature.js

@@ -0,0 +1,263 @@
+import { fireEvent, hr$, listen, loadScript } from 'hrQuery'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
+
+const VideoLivestream = function (options, rootElement) {
+    'use strict'
+
+    const config = options.config,
+        isTeaser = options.position && options.position === 'teaser',
+        skinPath = config.skinPath,
+        streamUrl = config.streamUrl,
+        agfMetadata = config.mediaMetadata.agf,
+        agfAppId = config.agfAppId,
+        atiMetadata = config.mediaMetadata.ati,
+        ardplayerUrl = config.ardplayerUrl,
+        smarttagUrl = config.smarttagUrl,
+        basePlayerUrl = config.baseUrl,
+        previewImageUrl = config.previewImageUrl,
+        playerId = config.containerId,
+        hasOverlay = config.overlay == 'true',
+        overlay = hasOverlay == true ? hr$('.overlay-' + config.overlayId)[0] : '',
+        trackingCookie = new TrackingCookie(),
+        autoplay = config.autoplay || false
+    let sourceNode, player, mediaCollection, playerConfig
+    const fetchPlayerStyle = function (url, id) {
+        return new Promise(function (resolve, reject) {
+            if (document.getElementById(id)) {
+                resolve()
+                console.log('style was already loaded before')
+            } else {
+                var link = document.createElement('link')
+                link.type = 'text/css'
+                link.rel = 'stylesheet'
+                link.id = id
+                link.onload = function () {
+                    resolve()
+                    console.log('style has loaded')
+                }
+                link.href = url
+
+                var headScript = document.querySelector('script')
+                headScript.parentNode.insertBefore(link, headScript)
+            }
+        })
+    }
+    const initPlayer = function (mediaStreams) {
+        loadArdPlayerScript()
+
+        loadScriptsForAddons()
+
+        createMediaCollection()
+
+        createPlayerConfig()
+
+        whenAvailable('ardplayer', function () {
+            player = new ardplayer.Player(playerId, playerConfig, mediaCollection)
+            bindPlayerEvents()
+        })
+    }
+    const whenAvailable = function (name, callback) {
+        const interval = 100 // ms
+        const intervalId = window.setInterval(function () {
+            if (window[name]) {
+                window.clearInterval(intervalId)
+                callback(window[name])
+            }
+        }, interval)
+    }
+    const loadArdPlayerScript = function () {
+        loadScript('js-ardplayerHr', ardplayerUrl)
+    }
+    const loadScriptsForAddons = function () {
+        if (trackingCookie.isTrackingAccepted('ati')) {
+            loadScript('js-smarttagProd', smarttagUrl)
+        }
+    }
+    const createMediaCollection = function () {
+        mediaCollection = {
+            _type: 'video',
+            _isLive: true,
+            _dvrEnabled: true,
+            _defaultQuality: 'auto',
+            _previewImage: previewImageUrl,
+            _mediaArray: [
+                {
+                    _plugin: 1,
+
+                    _mediaStreamArray: [
+                        {
+                            _quality: 'auto',
+                            _server: '',
+                            _stream: streamUrl,
+                            _cdn: '',
+                            _label: 'live',
+                        },
+                    ],
+                },
+            ],
+        }
+    }
+    const createPlayerConfig = function () {
+        playerConfig = {
+            _representationArray: [
+                {
+                    _representationClass: 'm',
+                },
+            ],
+            _streamed_webvtt_enabled: true,
+            _autoplay: autoplay,
+            _showOptions: true,
+            _showOptions_Plugins: true,
+            _showOptions_Quality: true,
+            _startTime: 0,
+            _endTime: null,
+            _autosave: true,
+            _baseUrl: basePlayerUrl,
+            _rememberCurrentTime: true,
+            _showSubtitelAtStart: false,
+            _forceControlBarVisible: false,
+            _initialVolume: 1,
+            _pixelConfig: createPixelConfig(),
+        }
+    }
+    const createPixelConfig = function () {
+        const atiConfig = {
+            tracker: 'ATIdebug',
+            tagConfig: {
+                site: atiMetadata.atiSiteId,
+                collectDomainSSL: atiMetadata.atiTrackingHost
+                    ? atiMetadata.atiTrackingHost.substring(
+                          atiMetadata.atiTrackingHost.lastIndexOf('/') + 1
+                      ) + '.xiti.com'
+                    : '',
+                cookieSecure: 'https:' === document.location.protocol,
+                secure: 'true',
+            },
+
+            clipData: {
+                mediaType: 'video',
+                playerId: playerId,
+                mediaLevel2: atiMetadata.secondLevelId,
+                mediaTheme1: 'Live',
+                mediaLabel: atiMetadata.mediaLabel,
+                duration: '',
+                broadcastMode: 'live',
+                debug: 'true',
+            },
+            playclickData: {
+                name: atiMetadata.mediaLabel + ':video:videoPlay',
+                chapter1: 'Video-Start',
+                chapter2: 'Live',
+                customVars: {
+                    site: {
+                        1: atiMetadata.documentName,
+                        2: atiMetadata.documentType,
+                        5: atiMetadata.documentDate,
+                    },
+                },
+            },
+
+            playclick: true,
+        }
+
+        const agfConfig = {
+            tracker: 'AGF',
+
+            // Offizielle Customer ID, für Prod vorne P,
+            appId: agfAppId,
+
+            // required for multiple players on one page
+            playerID: playerId,
+            clipData: {
+                type: agfMetadata.type, //static?
+
+                assetid: agfMetadata.assetid,
+                program: agfMetadata.program,
+                title: agfMetadata.title, // valid chars filtern
+                length: agfMetadata.length,
+
+                // Mandatory Custom Properties
+                // nol_c0: 'p0,0', // entry_index || "0"
+                nol_c2: agfMetadata.nol_c2, // flag webonly
+                nol_c5: agfMetadata.nol_c5, // Domain
+                nol_c7: agfMetadata.nol_c7, // Clip CRID
+                nol_c8: agfMetadata.nol_c8, // 28:54 -> sek
+                // Sendereihe, Cliptitel, PubDate yyyy.mm.dd hh:mm
+                nol_c9: agfMetadata.nol_c9,
+                nol_c10: agfMetadata.nol_c10, // Kanal
+                nol_c12: agfMetadata.nol_c12,
+
+                nol_c15: agfMetadata.nol_c15 || '', // entry_agffmt
+                nol_c16: agfMetadata.nol_c16 || '',
+
+                nol_c18: agfMetadata.nol_c18,
+                nol_c20: agfMetadata.nol_c20,
+            },
+        }
+
+        let pixelConfig = []
+        if (trackingCookie.isTrackingAccepted('agf')) {
+            pixelConfig.push(agfConfig)
+        }
+
+        if (trackingCookie.isTrackingAccepted('ati')) {
+            pixelConfig.push(atiConfig)
+        }
+
+        return pixelConfig
+    }
+    const bindPlayerEvents = function () {
+        player.$.on(ardplayer.Player.EVENT_PLAY_STREAM, function (event) {
+            switchOverlay()
+            fireEvent('hr:global:stopOtherAVs', 'ardplayer', true)
+        })
+
+        player.$.on(ardplayer.Player.SETUP_VIEW_COMPLETE, function (event) {
+            if (isTeaser) {
+                player.play()
+            }
+        })
+
+        player.$.on(ardplayer.Player.EVENT_PAUSE_STREAM, function (event) {
+            switchOverlay()
+        })
+
+        player.$.on(ardplayer.Player.EVENT_STOP_STREAM, function (event) {
+            switchOverlay()
+        })
+
+        listen('hr:global:stopOtherAVs', function (event) {
+            if (event.detail != 'ardplayer') {
+                player.pause()
+            }
+        })
+    }
+    const switchOverlay = function () {
+        if (hasOverlay && typeof overlay !== 'undefined') {
+            if (overlay.classList.contains('hideOverlay')) {
+                overlay.classList.remove('hideOverlay')
+            } else {
+                overlay.classList.add('hideOverlay')
+            }
+        }
+    }
+    if (window.gfkConnector && trackingCookie.isTrackingAccepted('agf') && agfMetadata) {
+        gfkConnector.init(function (gfkLinkID) {
+            agfMetadata.nol_c20 = 'p20,' + gfkLinkID
+            fetchPlayerStyle(skinPath).then(initPlayer())
+        })
+    } else {
+        fetchPlayerStyle(skinPath).then(initPlayer())
+    }
+
+    return {
+        play: function () {
+            player.play()
+        },
+        pause: function () {
+            player.pause()
+        },
+    }
+}
+
+export default VideoLivestream