@nebularstreams/statify 3.0.0

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

@@ -0,0 +1,437 @@
+/* global SITE */
+
+import m from "mithril";
+import {defineWidget, NoticeWidget as Notice, Empty, Selector} from "@nebularstreams/libmui";
+import {TemplateItem, TemplateInstall} from "./MarketItem.mjs";
+import NaviBar from "../navibar/NaviBarWidget.mjs";
+import "./css/market.css"
+import "./css/notice.css";
+
+import {stag} from "../../../../src/core.cookies/analytics.mjs";
+import CdnModel from "../../../../src/core/cdnmodel.mjs";
+
+const
+	{platform} = CdnModel,
+	{list} = platform,
+
+	DEFAULT_TYPE = "template",
+	DEFAULT_MAX_FEATURED = 2,
+
+	FEATURECLASS = "col-12 col-md-6 col-lg-4 col-xxl-3";
+
+function _insertItem(all, category, item) {
+	category = category.toLowerCase()
+		.trim();
+	if (category) {
+		if (!all[category]) {
+			all[category] = [];
+		}
+		all[category].push(item);
+	}
+}
+
+// noinspection JSUnusedLocalSymbols
+const
+
+	CategoryWidget = defineWidget(
+		({attrs, state}) => state.catkeys
+			.map((cat) => m("li.tag.category.grows.fabf.fa-tag", {
+				"aria-label": "category " + cat,
+				class: attrs.state.category === cat ? "accent" : "",
+				onclick: () => {
+					if (attrs.state.category === cat) {
+						delete attrs.state.category;
+					} else {
+						attrs.state.category = cat;
+					}
+					m.redraw();
+				}
+			}, cat)),
+
+		({attrs, state}) => {
+
+			const
+				{items} = attrs,
+				templateValues = Object.values(items || {}),
+
+				getCategories = (templateValues) => templateValues.reduce((all, item) => {
+					const tags = (item.meta?.tags || "").split(" ");
+					for (const tag of tags) _insertItem(all, tag, item);
+					if (item.ext?.subtype) _insertItem(all, item.ext?.subtype, item);
+					return all;
+				}, {}),
+				categories = getCategories(templateValues);
+
+			Object.assign(state, {
+				categories,
+				catkeys: Object.keys(categories)
+					.sort()
+			});
+			attrs.state.categories = state.categories;
+		}
+	),
+
+	PlatformEntityListWidget = defineWidget(
+		({
+			 attrs,
+			 state
+		 }) => (
+			state.data
+				? state.empty
+					? m(Empty, {
+						icon: attrs.icon,
+						size: 2,
+						message: attrs.message
+					})
+					: state.item
+						? m(TemplateInstall, {
+							item: state.item,
+							onCancel: () => {
+								state.item = null;
+								m.redraw();
+							}
+						})
+						: m(
+							"ul.flexrow.wrap.grows.scrolly.templatestories.h-100.fadein",
+							{
+								"aria-label": attrs.label
+							},
+							[
+								...attrs.header ? [m(Notice, attrs.header)] : [],
+								m(CategoryWidget, {
+									key: "cats",
+									state,
+									items: state.data.items
+								}),
+								m(".flexbreak", {key: "cosa"})
+							].concat(
+								(state.category ? state.categories[state.category] : state.data.items)
+									.map((item) => m(TemplateItem, {
+										key: item.id,
+										item,
+										templates: 3,
+										class: "pad-2 col-12 col-md-6 col-lg-4 col-xxl-3 ohidden",
+										innerClass: "growgrid graytrx ohidden shadow-1 bg-window-hi ",
+
+										onclick: () => {
+											state.item = item;
+											m.redraw();
+										}
+									}))
+							)
+						)
+				: state.loading
+					? m(Empty, {
+						icon: "sync.fa-spin",
+						size: 2
+					})
+					: m(Empty, {
+						icon: attrs.icon,
+						size: 4,
+						message: attrs.message
+					})
+		),
+		({
+			 attrs,
+			 state
+		 }) => {
+			state.loading = true;
+			m.request({
+				url: list(attrs.type, attrs.name)
+			})
+				.then((data) => {
+					state.data = data;
+					state.empty = !data.items.length;
+					state.loading = false;
+					m.redraw();
+				})
+				.catch((e) => {
+					state.error = e;
+					state.loading = false;
+					m.redraw();
+				});
+		}
+	),
+
+	details = (item, BASE = undefined) => {
+		const url = `${item.type}/${item.id_channel}/${item.id}`;
+		if (BASE) {
+			window.location.href = [SITE.canonical, BASE, url].join("/");
+		} else {
+			m.route.set("/market/" + url);
+		}
+	},
+
+	PlatformEntityMasterList = defineWidget(
+		({attrs, state}) => (
+			state.data
+				? state.empty
+					? m(Empty, {
+						icon: attrs.icon,
+						size: 4,
+						message: attrs.message
+					})
+					: m(
+						"ul.flexrow.wrap.grows.scrolly.templatestories.h-100.fadein",
+						{
+							"aria-label": attrs.label
+						},
+						[
+							...attrs.header ? [m(Notice, attrs.header)] : [],
+							m(CategoryWidget, {
+								key: "cats",
+								state,
+								items: state.data.items
+							}),
+							m(".flexbreak", {key: "cosa"})
+						].concat(
+							(state.category ? state.categories[state.category] : state.data.items)
+								.sort((a, b) => (a.creationTime < b.creationTime ? 1 : -1))
+								.map((item, index) => m(TemplateItem, {
+									key: item.id,
+									item,
+									...attrs.featured && index < (Math.min(attrs.featured, DEFAULT_MAX_FEATURED))
+										? {
+											featured: true,
+											templates: 3,
+											class: "fadein pad-2 featured" + FEATURECLASS
+										}
+										: {
+											featured: false,
+											class: "fadein pad-2 " + FEATURECLASS
+										},
+
+									innerClass: attrs.params?.innerClass || "growgrid graytrx shadow-1 bg-window-hi",
+									titleClass: attrs.params?.titleClass || "",
+									noTitleIcon: attrs.params?.noTitleIcon,
+									noTitleChannel: attrs.params?.noTitleChannel,
+									itemClass: attrs.params?.itemClass || "",
+									imageClass: attrs.params?.imageClass || "",
+
+									onclick: () => {
+										window.clearTimeout(state.timer);
+										state.timer = window.setTimeout(
+											() => details(item, attrs.params?.htmlRoot),
+											200
+										);
+									}
+								}))
+						)
+					)
+				: m(Empty, state.loading
+					? {
+						icon: "sync.fa-spin",
+						size: 2
+					}
+					: {
+						icon: attrs.icon,
+						size: 4,
+						message: attrs.message
+					})
+		),
+		({attrs, state}) => {
+			state.loading = true;
+			m.request({
+				url: list(attrs.type, attrs.name)
+			})
+				.then((data) => {
+					state.data = data;
+					state.empty = !data.items.length;
+					state.loading = false;
+					m.redraw();
+				})
+				.catch((e) => {
+					state.error = e;
+					state.loading = false;
+					m.redraw();
+				});
+		}
+	);
+
+const
+	TemplateMarket = defineWidget(
+		({attrs}) => m(
+			".market.flexcol.ohidden.fullheight.skinroot.w-100",
+			{
+				class: attrs.state.dark ? "dark" : ""
+			},
+			[
+				m(Selector, {
+					class: "grows w-100 market",
+					toolbarClass: "pad-2 bg-window-hi shadow-2 subbar",
+					bodyClass: "relative",
+					hideonly: true,
+					items: [
+						{
+							text: "all",
+							widget: PlatformEntityMasterList,
+							attrs: {
+								label: "List of Templates",
+								params: attrs.static,
+								featured: attrs.featured || 0,
+								key: "all",
+								type: DEFAULT_TYPE,
+								name: "all",
+								icon: "object-ungroup",
+								message: ["Template List is not available at the moment", "Please try again later"].join("\n"),
+								header: {
+									"key": "marika",
+									"class": "grows font-125 notihead",
+									"icon": "lightbulb",
+									"text": "Obscene Studio Templates are designed to streamline your creative process, giving you a head start with pre-built scenes and overlays. Browse, watch demos, and download to start enhancing your streams effortlessly"
+								}
+							}
+						}
+
+						/*
+						{
+							text: "720p",
+							widget: PlatformEntityMasterList,
+							attrs: {
+								label: "List of Templates for 720p",
+								featured: 2,
+								key: "720",
+								type: DEFAULT_TYPE,
+								params: attrs.static,
+								name: "720",
+								icon: "object-ungroup",
+								message: ["Template List is not available at the moment", "Please try again later"].join("\n")
+							}
+						},
+						{
+							text: "1080p",
+							widget: PlatformEntityMasterList,
+							attrs: {
+								label: "List of Templates for 1080p",
+								featured: 2,
+								key: "1080",
+								type: DEFAULT_TYPE,
+								name: "1080",
+								params: attrs.static,
+								icon: "object-ungroup",
+								message: ["Template List is not available at the moment", "Please try again later"].join("\n")
+							}
+						}
+
+						 */
+					]
+				})
+			]
+		),
+		() => stag("Market")
+	),
+	KeyWrapper = defineWidget(
+		({children}) => [children]
+	),
+	RouteSelector = defineWidget(
+		({attrs}) => {
+			const
+				{routes, current, default: defaultValue} = attrs,
+				currentRoute = current ? routes[current] || routes[defaultValue] : routes[defaultValue];
+
+			return [
+				m(NaviBar, {label: attrs.toolbarLabel, class: attrs.toolbarClass, subbar: true}, Object.values(attrs.routes)
+					.map(({caption, link, key}) =>
+						m(m.route.Link, {href: link, class: current === key ? "accent" : ""}, caption)
+					)),
+				m(KeyWrapper, [
+					m(
+						currentRoute.widget,
+						currentRoute.attrs
+					)
+				])
+			];
+		}
+	),
+	AccessoryMarket = defineWidget(
+		({attrs}) => m(
+			".market.flexcol.ohidden.fullheight.skinroot.w-100",
+			{
+				class: attrs.state.dark ? "dark" : ""
+			},
+			[
+				m(RouteSelector, {
+					class: "grows w-100 market",
+					toolbarClass: "justify-content-around pad-2 bg-window-hi shadow-2 subbar",
+					toolbarLabel: "Accessory Type Selector",
+					current: attrs.subtype,
+					default: "facekit",
+					routes: {
+
+						facekit: {
+							key: "facekit",
+							caption: "facekit",
+							link: "/facekit",
+							widget: PlatformEntityMasterList,
+							attrs: {
+								label: "List of Face Kits for Obscene Studio 3D camera",
+								key: "facekit",
+								type: "facekit",
+								name: "all",
+								icon: "theater-masks",
+								params: attrs.static,
+								message: ["Face Kits are not available at the moment", "Please try again later"].join("\n")
+							}
+						},
+						/*
+						room: {
+							key: "room",
+							caption: "rooms",
+							link: "/room",
+							widget: PlatformEntityMasterList,
+							attrs: {
+								label: "List of Virtual Rooms for Obscene Studio 3D camera",
+								key: "room",
+								type: "room",
+								name: "all",
+								icon: "border-none",
+								params: attrs.static,
+								message: ["Virtual Rooms are not available at the moment", "Please try again later"].join("\n")
+							}
+						},
+						*/
+						library: {
+							key: "library",
+							caption: "resources",
+							link: "/library",
+							widget: PlatformEntityMasterList,
+							attrs: {
+								label: "List of 3D Resources",
+								key: "library",
+								type: "library",
+								name: "all",
+								icon: "border-none",
+								params: attrs.static,
+								message: ["3D Resources are not available at the moment", "Please try again later"].join("\n")
+							}
+						}
+
+						/*
+						ball: {
+							key: "ball",
+							caption: "balls",
+							link: "/ball",
+							widget: PlatformEntityMasterList,
+							attrs: {
+								label: "List of Balls for the Virtual Room",
+								key: "ball",
+								type: "ball",
+								name: "all",
+								icon: "basketball-ball",
+								params: attrs.static,
+								message: ["Balls not available at the moment", "Please bounce back later"].join("\n")
+							}
+						}
+						 */
+
+					}
+				})
+			]
+		),
+		() => stag("AccessoryMarket")
+	);
+
+export {
+	TemplateMarket,
+	AccessoryMarket
+};

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

@@ -0,0 +1,34 @@
+import m from "mithril";
+import {defineWidget,  Icon} from "@nebularstreams/libmui";
+
+const
+	ICONS = {
+		image: "image",
+		audio: "music",
+		video: "film",
+		youtube: "film"
+	},
+	StoryLicenseItem = defineWidget(
+		({ attrs }) => ((attrs.title && attrs.source)
+			? m("li.flexrow.col-6.col-xl-4", {
+				...attrs.type && { class: "type_" + attrs.type }
+			}, [
+				m(Icon, {
+					iconClass: "unitsizesmall round",
+					icon: ICONS[attrs.type]
+				}),
+				m(".flexcol.grows", [
+					m("h4", attrs.title),
+					...attrs.author ? [m("div", "Copyright " + attrs.author)] : [],
+					...attrs.source ? [m("i", "source: " + attrs.source)] : []
+				])
+			])
+			: m(".nothing.d-none"))
+	),
+
+	TemplateLicenseWidget = defineWidget(
+		({ attrs }) => m("ul.flexrow.wrap.liclist", attrs.attributions
+			.map((item) => m(StoryLicenseItem, item)))
+	);
+
+export default TemplateLicenseWidget;