@nebularstreams/statify 3.0.0

package/src.website/src.widgets/widgets.market/widgets/market/MarketDetail.mjs

@@ -0,0 +1,78 @@
+import m from "mithril";
+import {defineWidget, Empty, Icon} from "@nebularstreams/libmui";
+import {TemplateInstall} from "./MarketItem.mjs";
+import NaviBarWidget from "../navibar/NaviBarWidget.mjs";
+
+import {stag} from "../../../../src/core.cookies/analytics.mjs";
+import CdnModel from "../../../../src/core/cdnmodel.mjs";
+
+const
+	{channel} = CdnModel,
+	{entityPath} = channel,
+
+	DEFAULT_TYPE = "template";
+
+function getItemTitle(item) {
+	const a = item.id.split("-");
+	if (a.length === 1) return a;
+	a.shift();
+	return a.join(" ");
+}
+
+
+const MarketDetailsWidget = defineWidget(
+	({attrs, state}) => m(".market.flexcol.ohidden.fullheight", [
+		m(NaviBarWidget, {
+			class: "bg-window-hi unitheight titlebar",
+			state: attrs.state
+		}, [
+			m(m.route.Link, {href: attrs.type === "template" ? "market" : "addons"}, "Market"),
+			...state.item
+				? [
+					m(Icon, {icon: "caret-right"}),
+					m(".currpage", getItemTitle(state.item))
+				] : []
+		]),
+		state.empty || state.loading
+			? m(Empty, {
+				icon: state.loading ? "sync.fa-spin" : attrs.icon,
+				size: 2,
+				message: attrs.message
+			})
+			: m(TemplateInstall, {
+				item: state.item,
+				onCancel: () => {
+					m.route.set("/market");
+				}
+			})
+	]),
+	({attrs, state}) => {
+
+		const
+			url = entityPath(attrs.id_channel, attrs.type || DEFAULT_TYPE, attrs.id);
+
+		state.loading = true;
+		m.request({url})
+			.then((data) => {
+				state.item = data;
+				state.loading = false;
+				m.redraw();
+				stag("Market-Details", {
+					event: "select_item",
+					props: {
+						item_id: attrs.id,
+						item_type: attrs.type || DEFAULT_TYPE,
+						item_channel: attrs.id_channel
+					}
+				});
+			})
+			.catch((e) => {
+				state.item = null;
+				state.error = e;
+				state.loading = false;
+				m.redraw();
+			});
+	}
+);
+
+export default MarketDetailsWidget;

package/src.website/src.widgets/widgets.market/widgets/market/MarketItem.mjs

@@ -0,0 +1,349 @@
+import m from "mithril";
+import {defineWidget, ButtonNew, Icon} from "@nebularstreams/libmui";
+import StoryLicenseWidget from "./StoryLicenseWidget.mjs";
+
+import isMobile from "../../../../src/support/ismobile.mjs";
+import TimeUtils from "../../../../src/support/timeutils.mjs";
+import CdnModel from "../../../../src/core/cdnmodel.mjs"
+import {stag} from "../../../../src/core.cookies/analytics.mjs";
+import {hasThirdParty} from "../../../../src/core.cookies/cookiemanager.mjs";
+
+const
+	ObjectAssign = Object.assign,
+	{ channel } = CdnModel,
+	{ entityPath, path } = channel,
+
+	DOWNLOADED = {};
+
+function getYouTubeImage(ref) {
+	return `https://i3.ytimg.com/vi/${ref}/hqdefault.jpg`;
+}
+
+const
+
+	YouTubeVideo = defineWidget(
+		({ attrs }) => m(
+			".ytwrapper.absolute",
+			{ class: "ytvideo w-100 h-100" + (attrs.class || "") },
+			m("iframe", {
+				class: "absolute w-100 h-100",
+				src: `https://www.youtube.com/embed/${attrs.ytref}?rel=0&modestbranding=1`,
+				allow: "encrypted-media; picture-in-picture",
+				allowfullscreen: true
+			})
+		)
+	),
+
+	Attributions = defineWidget(
+		({ attrs }) => {
+
+			const
+				{ attributions } = attrs,
+				sources = {};
+
+			attributions.reduce((all, item) => {
+				sources[item.source] = true;
+				return all;
+			});
+
+			return [
+				m(
+					".flexcol.attribution.pad-3.pad-v.bg-accent-hi",
+					m("h2", "Content Attribution"),
+					m("div", "Template references or includes resources from " + (Object.keys(sources)
+						.join(", ")))
+				),
+				m(StoryLicenseWidget, { attributions })
+			];
+		}
+	),
+
+	Strip = defineWidget(
+		({ attrs }) => {
+			const
+				{
+					item, scenes, max, state, label, itemType = "Scene"
+				} = attrs,
+				{ id_channel, type, id } = item;
+
+			return m(
+				"ul.scenesel.flexrow",
+				{
+					class: max > 5 ? "wrap" : "",
+					"aria-label": label || "List of Items"
+				},
+				scenes.map(
+					({ title, image }, index) => (
+						index < max
+							? m(
+								"li.thumbnail.flexcol",
+								{
+									title: title || (itemType + " " + index),
+									class: state.image === image ? "current" : "",
+									"data-type": itemType,
+									"data-title": title
+										? title.split("-")
+											.join(" ")
+										: (itemType + " " + index)
+								},
+								m("img", {
+									class: "errorimage",
+									onerror: (e) => {
+										e.target.parentNode.style.display = "none";
+									},
+									onclick: () => {
+										if (state.image === image) {
+											delete state.image;
+										} else {
+											state.image = image;
+										}
+
+										m.redraw();
+									},
+									src: entityPath(id_channel, type, id, image, attrs.shortPath),
+									alt: itemType + " " + title
+								})
+							)
+							: m(".d-none", { role: "presentation" }))
+				)
+			);
+		}
+	),
+
+	TemplateItem = defineWidget(
+		({ attrs, state }) => {
+
+			const
+				ICONS = {
+					template: "star",
+					accessory: "fan",
+					tatoo: "mask",
+					"3d": "cube",
+					facekit: "theater-masks",
+					room: "border-none"
+				},
+				{ item, scenes, templates, maximized, innerClass = "bg-window-hi", titleClass = "", noTitleIcon, noTitleChannel } = attrs,
+				{ ext, id_channel, type, id, creationTime, meta } = item,
+				{ title = id, description = "legacy story", ytref, image } = (meta || {}),
+				{ icon = ICONS[type] } = ext,
+				imageEntity = ytref
+					? getYouTubeImage(ytref)
+					: image || entityPath(id_channel, type, id, state.image || (attrs.shortPath ? "meta/logo.jpg" : "logo.jpg"), attrs.shortPath);
+
+			return m(
+				"li.templateitem.flexcol.pointer.grows.ohidden",
+				{
+					class: attrs.class,
+					"aria-label": title
+				},
+				m(
+					".inner.flexcol.pointer.relative.ohidden",
+					{ onclick: attrs.onclick, class: innerClass },
+					[
+						...state.error
+							? []
+							: [
+								m(
+									".image.divimage.relative.img169.coverimage",
+									{
+										class: attrs.imageClass || "asp169",
+										...(!maximized || state.image || !ytref || !hasThirdParty()) && {
+											style: {
+												backgroundImage: "url(" + imageEntity + ")"
+											}
+										},
+										onerror: () => {
+											state.error = true;
+											m.redraw();
+										}
+									},
+									[
+										...(ytref && maximized && !state.image && hasThirdParty())
+											? [
+												m(YouTubeVideo, { ytref })
+											] : [],
+
+										...(attrs.showattrib && state.images)
+											? [
+												m(ButtonNew, {
+													icon: "caret-left",
+													onClick: () => {
+														state.index--;
+														if (state.index === -1) state.index = state.images.length - 1;
+														state.image = state.images[state.index];
+														m.redraw();
+													},
+													class: "h-100 absolute to-left unitwidth"
+												}),
+												m(ButtonNew, {
+													icon: "caret-right",
+													onClick: () => {
+														state.index++;
+														if (state.index === state.images.length) state.index = 0;
+														state.image = state.images[state.index];
+														m.redraw();
+													},
+													class: "h-100 absolute to-right unitwidth"
+												})
+											]
+											: []
+									]
+								)
+
+							],
+
+						m(".flexrow.pad-2.titlestrip", {
+							class: titleClass
+						}, [
+							...noTitleIcon ? [] : [
+								m(Icon, {
+									icon,
+									size: 2,
+									iconClass: "unitsize"
+								})
+							],
+							m(".flexcol.grows.flex-place-center.ohidden", [
+								m(".title", title),
+								m("h6", `By ${id_channel}${creationTime ? ` (${TimeUtils.getTimeInterval(creationTime)})` : ""}`)
+							]),
+							...noTitleChannel ? [] : [
+								m(".unitsize.image.avatar.noshrink", {
+									style: { backgroundImage: "url(" + path(id_channel, "logo.jpg") + ")" },
+									title: id_channel
+								})
+							]
+						]),
+
+						...maximized && description
+							? [
+								m(".descriptionstrip", description)
+							] : [],
+
+						...scenes && ext.scenes && ext.scenes.length
+							? [
+								m(Strip, { itemType: "Scene", item, scenes: ext.scenes, max: scenes, state, label: "List of Scenes", shortPath: attrs.shortPath })
+							]
+							: [],
+						...templates && ext.templates && ext.templates.length
+							? [
+								m(Strip, { itemType: "Scene Template", item, scenes: ext.templates, max: templates, state, label: "List of Templates", shortPath: attrs.shortPath })
+							]
+							: []
+					]
+				)
+			);
+		},
+		({ attrs, state }) => {
+			const { templates = [] } = attrs.item.ext;
+			ObjectAssign(state, {
+				ytref: attrs.item.ytref || null,
+				images: templates.map((t) => t.image),
+				has: templates.length,
+				index: 0
+			});
+
+			if (state.images.length === 1) {
+				delete state.images;
+			}
+		}
+	),
+
+	TemplateInstall = defineWidget(
+		({ attrs, state }) => {
+
+			const
+				{ item } = attrs,
+				{ ext } = item;
+
+			return m(
+				".flexcol.flex-lg-grows.h-100.fadein.flex-lg-row.scrolly.bg-accent-light",
+				{
+					class: attrs.detailsClass
+				}, [
+
+					m(
+						".flexcol.maxcontainer.ohidden.col-12.col-lg-8.col-xl-6",
+						m(TemplateItem, {
+							...state.templates ? { templates: 10000 } : { scenes: 10000 },
+							item,
+							class: "pad-2 w-100 max",
+							imageClass: "grows",
+							showattrib: false,
+							maximized: true,
+							innerClass: attrs.innerClass,
+							titleClass: attrs.titleClass,
+							noTitleIcon: attrs.noTitleIcon,
+							noTitleChannel: attrs.noTitleChannel,
+							shortPath: attrs.shortPath
+							/*
+							onView: (what) => {
+								if (what === "templates" && !state.templates) {
+									state.templates = true;
+									m.redraw();
+								} else if (what === "scenes" && state.templates) {
+									state.templates = false;
+									m.redraw();
+								}
+							}
+							*/
+						})
+					),
+
+					m(".flexcol.pad-2.col-lg-4.col-xl-6", [
+						...isMobile
+							? [
+								m(".nodownload", "You can download this template by visiting the market from Obscene Studio")
+							]
+							: attrs.isOnline
+								? [
+									m(".isonline", attrs.isOnline)
+								]
+								: [
+									...DOWNLOADED[ext.url]
+										? [
+											m(".already", "Already downloaded")
+										]
+										: [
+											m(".flexrow.w-100.buttoncontainer", [
+												m(ButtonNew, {
+													link: ext.url,
+													target: "_blank",
+													download: ext.url.substring(ext.url.lastIndexOf("/") + 1),
+													icon: "download",
+													text: "Download Bundle",
+													class: "button-accent grows unitheight",
+													onClick: () => stag("Bundle Download", {
+														event: "file_download",
+														props: {
+															item_id: item.id,
+															item_type: "bundle",
+															item_idchannel: item.id_channel
+														}
+													})
+												})
+											])
+										],
+
+									m("h2", "How to install?"),
+									m("ol", [
+										m("li.pad-2.pad-v", "Download the Bundle to your computer"),
+										m("li.pad-2.pad-v", "Drag and drop the file into the running Obscene Studio Application"),
+										m("li.pad-2.pad-v", "It should be available when creating a new storyboard")
+									]),
+
+									m(
+										"a",
+										{ class: "pad-2 pad-v", target: "manual", href: "/doc/manual/app-storyboard-create.html#installing-a-new-template" },
+										"Check out Obscene Studio Manual for further instructions"
+									)
+								],
+						...(ext.attributions && ext.attributions.length)
+							? [
+								m(Attributions, { attributions: ext.attributions })
+							] : []
+					])
+				]);
+		}
+	);
+
+export {TemplateInstall, TemplateItem};