muxinc / player.style

A fresh collection of media player themes for every use case!
https://player.style
MIT License
136 stars 5 forks source link

site: add template embed method #81

Closed luwes closed 1 month ago

luwes commented 1 month ago

test URL: https://player-style-git-template-embed-mux.vercel.app/themes/instaplay

this PR adds a new choice for the embed method. either packaged or template. the template method shows all the html theme markup in the embed code that can easily be edited.

Vue and Svelte were the most difficult to get this working in the copy / paste code because they don't provide an easy way to just render a plain <template> element. In those langs template elements are processed.

in Vue the inner html is not added to template's internal document fragment and inline style and script tags cause build errors because Vue wants these things in the top level style and script tag.

in Svelte the template tag seemed to be stripped and it tried to process the curly braces in the Media Chrome template syntax.

I searched a bunch to try and disable this template processing but I couldn't find any answers. the workaround in this PR is to create the template element in javascript (in the top-level script tag) and then when the app is mounted via lifecycle hooks media-theme's template property is set to the created template element.

for each template embed code I made a test Codesandbox to see if they worked https://codesandbox.io/dashboard/drafts?workspace=1ed1312b-2336-4ff0-bf7a-2b8f2c993753

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
player-style ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 5, 2024 7:12pm