Skip to content

Add third batch of Web SDK demos to THEOplayer examples - #896

Merged
ceyhun-o merged 15 commits into
mainfrom
devin/1791188080-migrate-web-sdk-demos-batch-3
Oct 6, 2026
Merged

ceyhun-o merged 15 commits into
mainfrom
devin/1791188080-migrate-web-sdk-demos-batch-3

Conversation

@devin-ai-integration

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

Copy link
Copy Markdown
Contributor

Summary

Migrates ten legacy Web SDK demos into /theoplayer/examples/ using the existing Example + utils.js iframe pattern, and points the relevant docs at the new pages (changelogs untouched). No demo autoplays on page load.

New pages:

  • ads/02-advertisement-tester: merges both old ad tester demos. One Open Video UI player, an "Ad templates" dropdown (VAST pre/mid/post-roll, VMAP, Google IMA, Google IMA with companion ad, Google IMA SIMID, non-linear, VPAID), and an editable configuration (video URL with .mpd/.m3u8 type inference, ad URL, integration, position, time offset). The generated code also shows how to insert an ad at runtime with player.ads.schedule(). The page has a compact ad event log, and companion ads from ad.companions are rendered using only resourceURI/clickThrough/altText, never contentHTML.
  • ads/03-ad-block-detection: toggles blockContentIfAdError with the Google sample ad tag, and shows the Message and Content readout from player.ads aderror and player error.
  • ui/04-related-content (Open Video UI + Default UI): a "Related content" menu with tiles in Open Video UI, and player.related.sources in Default UI. Both open directly on ended: Default UI calls player.related.show(), and Open Video UI calls click() on the existing <theoplayer-menu-button> when #related-menu is still hidden, so no non-public menu API is needed.
  • ui/05-social-sharing (Open Video UI + Default UI): player.social in Default UI. In Open Video UI, a share menu with a translucent overlay covers the whole player and is closed with the menu's built-in back button.
  • ui/06-preview-thumbnails: toggles between in-manifest DASH tiled thumbnails and a side-loaded WebVTT thumbnails metadata track.
  • playback/06-preload: switches preload between none/metadata/auto and shows the buffer with RangeBar. Each switch re-creates the player: player.destroy(), then a new <theoplayer-default-ui>, and player.preload is set before player.source.
  • playback/07-playlist-and-caching: three-item playlist. It caches the next item with THEOplayer.cache.createTask(next, { amount: '25%' }) at 75% playback or on demand, and reuses any existing task for the same source from THEOplayer.cache.tasks (tasks persist across reloads), so no duplicate tasks are created.
  • streaming/07-network-api: request/response interceptor log with filters, pause and clear, plus optional VTT text reversal via response.respondWith(), which handles both string and ArrayBuffer bodies.

Extended existing pages instead of adding new ones:

  • ui/01-adding-buttons: ±10 s seek buttons (<theoplayer-seek-button seek-offset="±10"> in Open Video UI, two video.js Button components in Default UI).
  • ui/02-changing-ui-with-css: every UI skinning option can now be set separately (Default UI primary/secondary/tertiary color and background classes plus .vjs-selected; Open Video UI custom properties), with live generated CSS.

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 Bot and others added 2 commits October 5, 2026 08:48
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 requested a review from a team as a code owner October 5, 2026 09:20
@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.

devin-ai-integration Bot and others added 11 commits October 5, 2026 10:33
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>
…ove share close button

Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Comment thread theoplayer/static/theoplayer/v11/examples/related-content/demo.html Outdated
Comment thread theoplayer/static/theoplayer/v11/examples/social-sharing/demo.html
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
Comment thread theoplayer/examples/_components/ChangingUiWithCssDemo.tsx
Co-Authored-By: ceyhun.ozgoc <ceyhun.ozgoc@dolby.com>
@ceyhun-o
ceyhun-o merged commit 9e7f245 into main Oct 6, 2026
2 checks passed
@ceyhun-o
ceyhun-o deleted the devin/1791188080-migrate-web-sdk-demos-batch-3 branch October 6, 2026 11:22
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