Web SDK (incl. UX)
Guides & Tutorials

4min
The Guides & Tutorials chapter offers step-by-step instructions and practical examples for using the Web SDK. 
﻿Customizing Theme﻿
A key feature, especially when using one of the existing event-specific experiences, is to customize the experience to your requirements. To achieve this, the theme can be customized either by using the EXP App Config﻿, or by overwriting the extensions.custom.theme property in the EXP Manifest.
JSON
{
    "theme": {
        "colors": [
            {
                "id": "Icon/Primary/Default",
                "value": "blue"
            },
            {
                "id": "Button/Controls/Fill/TVSync",
                "value": "blue"
            },
            {
                "id": "Progressbar/ProgressLine/Fill/VOD",
                "value": "green"
            },
            {
                "id": "Progressbar/Track/Fill/Default",
                "value": "yellow"
            },
            {
                "id": "Button/Navigation/Primary/Fill/Active",
                "value": "yellow"
            },
            {
                "id": "Progressbar/Track/Fill/Hover",
                "value": "#FF8800"
            }
        ],
        "typography": [
            {
                "id": "Heading/01/Medium",
                "value": {
                    "fontStyle": "italic",
                    "fontSize": "66px",
                    "fontWeight": "900",
                    "lineHeight": "44px",
                    "letterSpacing": "-0.02em",
                    "textTransform": "uppercase",
                    "color": "red",
                    "textDecoration": "underline"
                }
            }
        ]
    }
}
{
    "theme": {
        "colors": [
            {
                "id": "Icon/Primary/Default",
                "value": "blue"
            },
            {
                "id": "Button/Controls/Fill/TVSync",
                "value": "blue"
            },
            {
                "id": "Progressbar/ProgressLine/Fill/VOD",
                "value": "green"
            },
            {
                "id": "Progressbar/Track/Fill/Default",
                "value": "yellow"
            },
            {
                "id": "Button/Navigation/Primary/Fill/Active",
                "value": "yellow"
            },
            {
                "id": "Progressbar/Track/Fill/Hover",
                "value": "#FF8800"
            }
        ],
        "typography": [
            {
                "id": "Heading/01/Medium",
                "value": {
                    "fontStyle": "italic",
                    "fontSize": "66px",
                    "fontWeight": "900",
                    "lineHeight": "44px",
                    "letterSpacing": "-0.02em",
                    "textTransform": "uppercase",
                    "color": "red",
                    "textDecoration": "underline"
                }
            }
        ]
    }
}
﻿
More information about theming and customization can be found in the Theming & Customization﻿ chapter.
Accessing playback data
The playback data can be accessed via the Event System. This example shows how to access the currentTime value of the video player by listening to the PLAYER_UPDATE event.
TypeScript
window.addEventListener('webToNative',(event) => {
  if(event.detail.type === 'PLAYER_UPDATE') {
    console.log('player information:', event.detail.payload)
  }
})

/* 
  player information: {
    currentTime: 4135.110251,
    duration: 7797,
    isLive: false
  }
*/
window.addEventListener('webToNative',(event) => {
  if(event.detail.type === 'PLAYER_UPDATE') {
    console.log('player information:', event.detail.payload)
  }
})

/* 
  player information: {
    currentTime: 4135.110251,
    duration: 7797,
    isLive: false
  }
*/
﻿
The playback system uses this event to inform about state changes so there might be information missing. You can also request the full data from playback system by sending a request event.
TypeScript
window.addEventListener('webToNative',(event) => {
  if(event.detail.type === 'PLAYER_UPDATE') {
    console.log('player information:', event.detail.payload)
  }
})

const customEvent = new CustomEvent('nativeToWeb', {
  detail: {
    type: 'PLAYER_UPDATE_REQUEST',
    payload: {}
  },
})
window.dispatchEvent(customEvent)

/* 
  player information: {
    currentTime: 4135.110251,
    duration: 7797,
    isLive: false,
    isPlaying: true,
    isBuffering: false,
    isSeeking: false,
    volume: 1,
    muted: false,
    src: 'https://teststream.m3u8',
    fullscreen: false
  }
*/
window.addEventListener('webToNative',(event) => {
  if(event.detail.type === 'PLAYER_UPDATE') {
    console.log('player information:', event.detail.payload)
  }
})

const customEvent = new CustomEvent('nativeToWeb', {
  detail: {
    type: 'PLAYER_UPDATE_REQUEST',
    payload: {}
  },
})
window.dispatchEvent(customEvent)

/* 
  player information: {
    currentTime: 4135.110251,
    duration: 7797,
    isLive: false,
    isPlaying: true,
    isBuffering: false,
    isSeeking: false,
    volume: 1,
    muted: false,
    src: 'https://teststream.m3u8',
    fullscreen: false
  }
*/
﻿
Triggering an entity (camera) change
Events can be used to programatically change the currently playing content entity (camera).
TypeScript
window.addEventListener('webToNative',(event) => {
  if(event.detail.type === 'ENTITY_VIDEO_SET_SUCCESS') {
    console.log('switched to entity:', event.detail.payload.entityId)
  }
})

const customEvent = new CustomEvent('nativeToWeb', {
  detail: {
    type: 'ENTITY_VIDEO_SET',
    payload: { entityId: 'entitiy1234abc' }
  },
})
window.dispatchEvent(customEvent)
window.addEventListener('webToNative',(event) => {
  if(event.detail.type === 'ENTITY_VIDEO_SET_SUCCESS') {
    console.log('switched to entity:', event.detail.payload.entityId)
  }
})

const customEvent = new CustomEvent('nativeToWeb', {
  detail: {
    type: 'ENTITY_VIDEO_SET',
    payload: { entityId: 'entitiy1234abc' }
  },
})
window.dispatchEvent(customEvent)
﻿
On the ENTITY_VIDEO_SET event the playback system switches to this entity and seeks to the same position as the previous entity was playing.
Event System
Troubleshooting and FAQs
Guides & Tutorials

﻿Customizing Theme﻿

Accessing playback data

Triggering an entity (camera) change

Customizing Theme
