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.
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
ortemplate
. thetemplate
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