Web SDK (incl. UX)
Custom Experiences using Core
3 min
beside the available exp packages (e g @nativewaves/exp default ), we provide access to lower level sdks that were used to create these experiences, called the exp core sdk the exp core sdk can be imported as one package ( @nativewaves/exp core ) the following components (and more) are part of the core core package @nativewaves/exp core provides components necessary to handle a exp manifest playback videoplayer (llhls, hls, mp4, ) video controls ui experienceplayer (exp manifest playback) audio sync fullscreen handling camera switching gestures event system as well as commonly used building blocks across exps and videocontrols ui buttons typography appsidebar loader list theming routing for example usage take a look at the implementation of the default exp ( https //github com/nativewaves/nw web/tree/develop/packages/exp default ) custom exp example you can pass props to the \<experiencebasestandalone> that can change the controls of the exp by using the videocontrolsprops prop or the sidebar routes by using the sidebarroutes prop integrating the football experience as an example, you can install the @nativewaves/nw exp football package and pass the usefootballvideocontrolsprops hook to the videocontrolsprops and the usefootballsidebarroutes hook to the sidebarroutes this will change the ui of the exp video player to support data related to those games the example would be something like the following import { playbackcontainer, themeprovider} from '@nativewaves/exp core' import { experiencebasestandalone } from '@nativewaves/exp default' import { usefootballsidebarroutes, usefootballvideocontrolsprops, } from '@nativewaves/nw exp football' import { queryclientprovider, queryclient } from '@tanstack/react query' const queryclient = new queryclient() export const expwrapper = () => ( \<browserrouter> \<queryclientprovider client={queryclient}> \<themeprovider> \<playbackcontainer manifestid={manifestid} envtype={envtype} \> \<experiencebasestandalone routepath={routepath} videocontrolsprops={usefootballvideocontrolsprops()} sidebarroutes={usefootballsidebarroutes()} /> \</playbackcontainer> \</themeprovider> \</queryclientprovider> \</browserrouter> )