Web SDK (incl. UX)
Custom Experiences using Core

3min
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:
TypeScript
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>
)
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>
)
﻿
﻿
Troubleshooting and FAQs
Introduction