Skip to content

Add fourth batch of Web SDK demos to THEOplayer examples - #901

Merged
ceyhun-o merged 19 commits into
mainfrom
devin/1791366538-migrate-web-sdk-demos-batch-4
Oct 12, 2026
Merged

ceyhun-o merged 19 commits into
mainfrom
devin/1791366538-migrate-web-sdk-demos-batch-4

Conversation

@devin-ai-integration

@devin-ai-integration devin-ai-integration Bot commented Oct 7, 2026 •

Copy link
Copy Markdown
Contributor

Summary

This PR moves the next batch of legacy Web SDK demos to /theoplayer/examples/. It also adds new OptiView Real-time Streaming (formerly Millicast), OptiView Live Streaming, Dolby Atmos and Dolby Vision examples, and a search bar on the examples overview.

New example pages. All use Open Video UI unless noted otherwise:

Page Notes
ui/07-audio-only A bare <theoplayer-ui> with a track-info slot and a control bar containing play, current time, seek bar, remaining time (<theoplayer-time-display remaining>), mute and volume. An empty <div slot="preview"></div> in <theoplayer-time-range> suppresses the default seek preview.
The video is hidden with theoplayer-ui::part(media-layer) { visibility: hidden; }. --theoplayer-aspect-ratio: none plus a fixed --theoplayer-height replace the 16:9 box.
no-auto-hide keeps the controls visible. Below 480px the volume slider is hidden so the time displays fit.
ui/08-keep-control-bar-visible Shows both UIs. Open Video UI uses user-idle-timeout="-1".
The Default UI CSS override needs visibility: visible !important next to opacity: 1 !important, because opacity alone no longer keeps the current control bar visible. The how-to ui/web/keep-control-bar-visible.mdx is updated with the same fix.
analytics/01-conviva (new Analytics category) Uses @theoplayer/conviva-connector-web with debug: true.
A stream-template dropdown offers HLS/DASH and VOD/Live. Customer key and Gateway URL inputs fall back to the placeholder test credentials when left empty.
Load stream calls destroy() on the old connector, creates a new one, then sets the source. setContentInfo runs on every sourcechange.
A compact event log sits below the player, and a note says the Conviva debug logs appear in the DevTools console.
streaming/08-millicast OptiView Real-time Streaming. Plays { type: 'millicast', src: 'multiview', streamAccountId: 'k9Mwad' } and explains src, streamAccountId and subscriberToken.
streaming/09-theolive OptiView Live Streaming. Plays a channel and shows a player.latency.currentLatency readout, updated on every timeupdate.
streaming/10-dolby-atmos, 11-dolby-vision DASH/HLS sources with browser capability detection: mediaCapabilities.decodingInfo, falling back to MediaSource.isTypeSupported, plus matchMedia('(dynamic-range: high)'). A green/yellow/red status box shows the result and lists the active codecs.

What the status colours mean:

  • Atmos: probes ec-3 with audio.spatialRendering: true. A note explains that browsers can't detect whether the speakers or headphones support Atmos. Red means only that ec-3 audio can't be decoded; the video can still play.
  • Vision: probes dvh1.08.09 / dvhe.08.09 (as signaled by DASH/HLS) and the hvc1 / hev1 Main10 HLG base layer. Red means the browser can't decode HEVC. Yellow means either the browser can decode only the HLG base layer and not Dolby Vision, or the display does not support HDR.

Searchable card lists:

  • The search logic is extracted into src/components/DocCardListSearch, which provides useDocCardListSearch(groups), DocCardListSearchInput and a SearchableDocCardGroups renderer.
  • SubcategoryDocCardList, SidebarDocCardList and SidebarCategoryDocCardList each build DocCardGroup[] and hand them to SearchableDocCardGroups.
  • All three accept searchable and searchPlaceholder. searchPlaceholder is used as both the placeholder and the aria-label, and defaults to Search….
  • The examples overview uses <SubcategoryDocCardList searchable searchPlaceholder="Search examples…" />.
  • Search matches the label, description and group label. Every whitespace-separated term must match, Escape clears the input, and empty groups are hidden.
  • Without searchable, all three components render as before.

Link to Devin session: https://dolby.devinenterprise.com/sessions/b936a9a57363474d901aed6902718cc2
Open in Devin Desktop: https://dolby.devinenterprise.com/desktop/session/b936a9a57363474d901aed6902718cc2?variant=devin

@devin-ai-integration

Copy link
Copy Markdown
Contributor Author

I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".

  • Disable automatic comment, CI, and merge conflict monitoring

@theoplayer-bot

This comment has been minimized.

@ceyhun-o
ceyhun-o marked this pull request as ready for review October 7, 2026 13:43
@ceyhun-o
ceyhun-o requested review from a team as code owners October 7, 2026 13:43
@ceyhun-o
ceyhun-o requested a review from Danesz October 7, 2026 13:43
devin-ai-integration Bot and others added 18 commits October 9, 2026 09:23
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
@devin-ai-integration
devin-ai-integration Bot force-pushed the devin/1791366538-migrate-web-sdk-demos-batch-4 branch from cfaf67e to a954052 Compare October 9, 2026 09:23
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
@ceyhun-o
ceyhun-o merged commit aaeb3c3 into main Oct 12, 2026
2 checks passed
@ceyhun-o
ceyhun-o deleted the devin/1791366538-migrate-web-sdk-demos-batch-4 branch October 12, 2026 10:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants