Skip to content

Commit

Permalink
https://github.com/elmsln/issues/issues/1530
Browse files Browse the repository at this point in the history
  • Loading branch information
@btopro
btopro committed Aug 10, 2023
1 parent ce331bd commit 814fc7d
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 53 deletions.
10 changes: 9 additions & 1 deletion elements/play-list/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<script type="module">
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '@polymer/iron-demo-helpers/demo-snippet.js';
import "@lrnwebcomponents/video-player/video-player.js";
import '../play-list.js';
</script>
<style is="custom-style" include="demo-pages-shared-styles"></style>
Expand All @@ -18,7 +19,14 @@
<h3>Basic play-list demo</h3>
<demo-snippet>
<template>
<play-list orientation="vertical"></play-list>
<play-list orientation="vertical">
<video-player source="https://www.youtube.com/watch?v=LrS7dqokTLE" media-title="Why d434343 anywhere?" >
<track src="files/HAXshort.vtt" kind="subtitles" label="English" slot="track">
</video-player>
<img src="https://placehold.it/350x150"/>
<video-player source="https://www.youtube.com/watch?v=LrS7dqokTLE" media-title="Wfgdfgdfgd?" >
</video-player>
</play-list>
<play-list></play-list>
</template>
</demo-snippet>
Expand Down
2 changes: 2 additions & 0 deletions elements/play-list/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,12 @@
},
"license": "",
"dependencies": {
"@lrnwebcomponents/utils": "^7.0.15",
"@shoelace-style/shoelace": "2.6.0",
"lit": "^2.7.5"
},
"devDependencies": {
"@lrnwebcomponents/video-player": "^7.0.15",
"@wcfactory/rollup-umd-build": "^0.12.1",
"@lrnwebcomponents/deduping-fix": "^7.0.4",
"@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
Expand Down
62 changes: 37 additions & 25 deletions elements/play-list/play-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@
* Copyright 2023
* @license , see License.md for full text.
*/
import { LitElement, html, css } from "lit";
import { LitElement, html, css, nothing } from "lit";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import "@shoelace-style/shoelace/dist/components/carousel/carousel.js";
import "@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.js";
import "@lrnwebcomponents/video-player/video-player.js";
import { generateStyleLinkEls } from "./lib/SLStyleManager.js";
import { haxElementToNode, nodeToHaxElement } from "@lrnwebcomponents/utils/utils.js";

/**
* `play-list`
Expand All @@ -22,24 +23,40 @@ class PlayList extends LitElement {
super();
// handles SL styles link elements
generateStyleLinkEls();
this.items = [
{
src: "https://shoelace.style/assets/examples/carousel/mountains.jpg",
alt: "A picture of a cat",
},
{
src: "https://shoelace.style/assets/examples/carousel/mountains.jpg",
alt: "A picture of a mountain",
}
];
this.items = [];
this.navigation = true;
this.pagination = true;
this.aspectRatio = "16:9";
this.slide = 0;
this.orientation = "horizontal";
// @todo add a mutation observer to watch for changes to the light dom
// and then use that to update the items array so that we can translate
// we have to do this so that we can ensure quality control of the light dom
// mutation observer for light dom changes
this._observer = new MutationObserver((mutations) => {
this.mirrorLightDomToItems();
});
this._observer.observe(this, {
childList: true,
subtree: true,
});
}

async mirrorLightDomToItems() {
let items = Array.from(this.children);
if (items.length !== 0) {
await Promise.all(items.map(async (item) => {
return await nodeToHaxElement(item);
})).then((items) => {
this.items = items;
});
}
else {
this.items = [];
}
}
// takes a hax element, converts it to a node, turns it into html, then renders it
// this has gone through filtering and is safe as a result as it's just rendering
// whatever has been put into the light dom
renderHAXItem(item) {
return html`${unsafeHTML(haxElementToNode(item).outerHTML)}`;
}

/**
Expand Down Expand Up @@ -120,6 +137,7 @@ class PlayList extends LitElement {
*/
render() {
return html`
${this.items.length > 0 ? html`
<sl-carousel
?navigation="${this.navigation && this.orientation === 'horizontal'}"
?pagination="${this.pagination}"
Expand All @@ -129,18 +147,11 @@ class PlayList extends LitElement {
style="--aspect-ratio: ${this.aspectRatio};">
${this.items.map((item) => html`
<sl-carousel-item class="item">
<img
class="item"
alt="${item.alt}"
src="${item.src}"
/>
${this.renderHAXItem(item)}
</sl-carousel-item>
`)}
<sl-carousel-item class="item">
<video-player source="https://www.youtube.com/watch?v=LrS7dqokTLE" media-title="Why do I need to go anywhere?" > <track src="files/HAXshort.vtt" kind="subtitles" label="English" slot="track">
</video-player>
</sl-carousel-item>
</sl-carousel>
`: nothing}
`;
}

Expand All @@ -160,6 +171,7 @@ class PlayList extends LitElement {
if (super.firstUpdated) {
super.firstUpdated(changedProperties);
}
this.mirrorLightDomToItems();
}
/**
* LitElement life cycle - property changed
Expand All @@ -179,7 +191,7 @@ class PlayList extends LitElement {
})
);
if (this.shadowRoot.querySelector('.carousel').activeSlide !== this[propName]) {
this.shadowRoot.querySelector('.carousel').goToSlide(parseInt(this[propName]));
// this.shadowRoot.querySelector('.carousel').goToSlide(parseInt(this[propName]));
}
}
});
Expand Down
62 changes: 37 additions & 25 deletions elements/play-list/src/play-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@
* Copyright 2023
* @license , see License.md for full text.
*/
import { LitElement, html, css } from "lit";
import { LitElement, html, css, nothing } from "lit";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import "@shoelace-style/shoelace/dist/components/carousel/carousel.js";
import "@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.js";
import "@lrnwebcomponents/video-player/video-player.js";
import { generateStyleLinkEls } from "./lib/SLStyleManager.js";
import { haxElementToNode, nodeToHaxElement } from "@lrnwebcomponents/utils/utils.js";

/**
* `play-list`
Expand All @@ -22,24 +23,40 @@ class PlayList extends LitElement {
super();
// handles SL styles link elements
generateStyleLinkEls();
this.items = [
{
src: "https://shoelace.style/assets/examples/carousel/mountains.jpg",
alt: "A picture of a cat",
},
{
src: "https://shoelace.style/assets/examples/carousel/mountains.jpg",
alt: "A picture of a mountain",
}
];
this.items = [];
this.navigation = true;
this.pagination = true;
this.aspectRatio = "16:9";
this.slide = 0;
this.orientation = "horizontal";
// @todo add a mutation observer to watch for changes to the light dom
// and then use that to update the items array so that we can translate
// we have to do this so that we can ensure quality control of the light dom
// mutation observer for light dom changes
this._observer = new MutationObserver((mutations) => {
this.mirrorLightDomToItems();
});
this._observer.observe(this, {
childList: true,
subtree: true,
});
}

async mirrorLightDomToItems() {
let items = Array.from(this.children);
if (items.length !== 0) {
await Promise.all(items.map(async (item) => {
return await nodeToHaxElement(item);
})).then((items) => {
this.items = items;
});
}
else {
this.items = [];
}
}
// takes a hax element, converts it to a node, turns it into html, then renders it
// this has gone through filtering and is safe as a result as it's just rendering
// whatever has been put into the light dom
renderHAXItem(item) {
return html`${unsafeHTML(haxElementToNode(item).outerHTML)}`;
}

/**
Expand Down Expand Up @@ -120,6 +137,7 @@ class PlayList extends LitElement {
*/
render() {
return html`
${this.items.length > 0 ? html`
<sl-carousel
?navigation="${this.navigation && this.orientation === 'horizontal'}"
?pagination="${this.pagination}"
Expand All @@ -129,18 +147,11 @@ class PlayList extends LitElement {
style="--aspect-ratio: ${this.aspectRatio};">
${this.items.map((item) => html`
<sl-carousel-item class="item">
<img
class="item"
alt="${item.alt}"
src="${item.src}"
/>
${this.renderHAXItem(item)}
</sl-carousel-item>
`)}
<sl-carousel-item class="item">
<video-player source="https://www.youtube.com/watch?v=LrS7dqokTLE" media-title="Why do I need to go anywhere?" > <track src="files/HAXshort.vtt" kind="subtitles" label="English" slot="track">
</video-player>
</sl-carousel-item>
</sl-carousel>
`: nothing}
`;
}

Expand All @@ -160,6 +171,7 @@ class PlayList extends LitElement {
if (super.firstUpdated) {
super.firstUpdated(changedProperties);
}
this.mirrorLightDomToItems();
}
/**
* LitElement life cycle - property changed
Expand All @@ -179,7 +191,7 @@ class PlayList extends LitElement {
})
);
if (this.shadowRoot.querySelector('.carousel').activeSlide !== this[propName]) {
this.shadowRoot.querySelector('.carousel').goToSlide(parseInt(this[propName]));
// this.shadowRoot.querySelector('.carousel').goToSlide(parseInt(this[propName]));
}
}
});
Expand Down
9 changes: 7 additions & 2 deletions elements/utils/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,7 @@ function dashToCamel(str) {
}
/**
* Convert a haxElement to a DOM node.
* @return {Node} DOM node.
*/
function haxElementToNode(haxSchema) {
let tag = haxSchema.tag;
Expand Down Expand Up @@ -748,10 +749,14 @@ async function nodeToHaxElement(node, eventName = "insert-element") {
// support sandboxed environments which
// will hate iframe tags but love webview
let tag = node.tagName.toLowerCase();
if (window.HaxStore.instance._isSandboxed && tag === "iframe") {
if (window.HaxStore && window.HaxStore.instance && window.HaxStore.instance._isSandboxed && tag === "iframe") {
tag = "webview";
}
let slotContent = await window.HaxStore.instance.getHAXSlot(node);
let slotContent = '';
// if hax store around, allow it to get slot content of the node
if (window.HaxStore && window.HaxStore.instance) {
slotContent = await window.HaxStore.instance.getHAXSlot(node);
}
// support fallback on inner text if there were no nodes
if (slotContent == "") {
slotContent = node.innerText;
Expand Down

1 comment on commit 814fc7d

@vercel
Copy link

@vercel vercel bot commented on 814fc7d Aug 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

lrnwebcomponents – ./

lrnwebcomponents.vercel.app
haxapi.vercel.app
lrnwebcomponents-elmsln.vercel.app
lrnwebcomponents-git-master-elmsln.vercel.app

Please sign in to comment.