@nebularstreams/statify 3.0.0

package/src/widgets.market/MarketItem.strips.js

@@ -0,0 +1,276 @@
+const
+	m = require("mithril"),
+	{ Button, Icon } = require("../util/widgets/app.widgets"),
+	defineWidget = require("../util/widgets/util.definewidget"),
+	{ YouTube } = require("../widgets.features/Youtube"),
+	StoryLicenseWidget = require("./StoryLicenseWIdget"),
+
+	SCENE_STRIPS = false,
+	TEMPLATE_STRIPS = false;
+
+const
+
+	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
+				{
+					entityPath, 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", {
+									src: entityPath(id_channel, type, id, image),
+									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-all"
+				},
+				{ item, scenes, templates, maximized, featured, cdnModel } = attrs,
+				{ channel } = cdnModel,
+				{ entityPath, path } = channel,
+				{ ext, id_channel, type, id, creationTime, meta } = item,
+				{ title = id, description = "legacy story", ytref, image } = (meta || {}),
+				{ icon = ICONS[type] } = ext,
+				imageEntity = image || entityPath(id_channel, type, id, state.image || "logo.jpg");
+
+			return m(
+				"li.templateitem.flexcol.pointer.grows.ohidden",
+				{
+					class: attrs.class,
+					"aria-label": title
+				},
+				m(
+					".inner.flexcol.pointer.bg-window-hi.relative",
+					{ class: attrs.innerClass },
+					[
+						...ytref
+							? [
+								m(YouTube, { class: "", videoItem: { ref: ytref } })
+							]
+							: [
+								m(
+									".image.divimage.relative.img169.coverimage",
+									{
+										class: attrs.imageClass || "asp169",
+										style: {
+											backgroundImage: "url(" + imageEntity + ")"
+										}
+									}
+								)
+							],
+
+						m(".flexrow.pad-2.titlestrip", [
+							m(Icon, {
+								icon,
+								size: 2,
+								iconClass: "unitsize"
+							}),
+							m(".flexcol.grows.flex-place-center.ohidden", [
+								m(".title", title),
+								m("h6.diffdate", { "data-timems": creationTime }, `By ${id_channel}`)
+							]),
+
+							...featured || maximized
+								? [
+									...ext.scenes
+										? [
+											m(
+												".unitheight.metric.fa-object-ungroup",
+												{
+													class: scenes && attrs.maximized ? "accent" : "",
+													title: "Scenes contained in the template",
+													"data-metric": "scenes",
+													"data-num": String(ext.scenes.length)
+												}
+											)
+										] : [],
+
+									...state.has
+										? [
+											m(
+												".unitheight.metric.fa-object-group",
+												{
+													class: templates && attrs.maximized ? "accent" : "",
+													title: "Template Scenes contained in the template",
+													"data-metric": "templates",
+													"data-num": String(ext.templates.length)
+												}
+											)
+										] : []
+								] : [],
+
+							m(".unitsize.image.avatar.noshrink", {
+								style: { backgroundImage: "url(" + path(id_channel, "logo.jpg") + ")" },
+								title: id_channel
+							})
+						]),
+
+						...maximized && description
+							? [
+								m(".descriptionstrip", description)
+							] : [],
+						...SCENE_STRIPS && scenes && ext.scenes && ext.scenes.length
+							? [
+								m(Strip, { entityPath, itemType: "Scene", item, scenes: ext.scenes, max: scenes, state, label: "List of Scenes" })
+							]
+							: [],
+						...TEMPLATE_STRIPS && templates && ext.templates && ext.templates.length
+							? [
+								m(Strip, { entityPath, itemType: "Scene Template", item, scenes: ext.templates, max: templates, state, label: "List of Templates" })
+							]
+							: []
+					]
+				)
+			);
+		},
+		({ attrs, state }) => {
+			const { templates = [] } = attrs.item.ext;
+			Object.assign(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, cdnModel, pageMetadata } = attrs,
+				{ ext } = item;
+
+			return m(".flexcol.flex-lg-grows.h-100.fadein.flex-lg-row.scrolly.bg-accent-light", { role: "presentation" }, [
+
+				m(
+					".flexcol.maxcontainer.ohidden.col-12.col-lg-8.col-xl-6",
+					{ role: "presentation" },
+					m(TemplateItem, {
+						...state.templates ? { templates: 10000 } : { scenes: 10000 },
+						item,
+						cdnModel,
+						class: "pad-2 w-100 max",
+						imageClass: "grows",
+						showattrib: false,
+						maximized: true,
+						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", { role: "presentation" }, [
+					m(".flexcol.grows.col-12.howto", [
+
+						m(".flexrow.w-100.buttoncontainer.no-mobile", [
+							m(Button, {
+								link: ext.url,
+								target: "_blank",
+								download: ext.url.substring(ext.url.lastIndexOf("/") + 1),
+								icon: "download",
+								text: "Download Bundle",
+								class: "button-accent grows unitheight"
+							})
+						]),
+						m("h2", "How to install Obscene Studio " + pageMetadata.title + "?"),
+						m("ol", { "aria-label": "How to install Downloaded Obscene Studio  " + pageMetadata.title }, [
+							m("li.pad-2.pad-v.no-mobile", "Download the Bundle to your computer"),
+							m("li.pad-2.pad-v.no-desktop", "Visit this page from a computer and download the Package"),
+							m("li.pad-2.pad-v", "Drag and drop the file just downloaded from your Downloads folder into the running Obscene Studio Application"),
+							m("li.pad-2.pad-v", "The list of " + pageMetadata.title + " in Obscene Studio will show the new item. It is ready to use !")
+						]),
+
+						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(".flexcol.grows-col-12.attrib", [
+								m(Attributions, { attributions: ext.attributions })
+							])
+						] : []
+				])
+			]);
+		}
+	);
+
+const
+	TemplateInstallDynamic = defineWidget(
+		({ attrs }) => m(TemplateInstall, { cdnModel: attrs.cdnModel, item: attrs.dynamicData.item, pageMetadata: attrs.pageMetadata })
+	);
+
+module.exports = TemplateInstallDynamic;

package/src/widgets.market/StoryLicenseWIdget.js

@@ -0,0 +1,45 @@
+const
+	m = require("mithril"),
+	defineWidget = require("../util/widgets/util.definewidget"),
+	{ Icon } = require("../util/widgets/app.widgets"),
+	ICONS = {
+		image: "image",
+		audio: "music",
+		video: "film",
+		youtube: "film",
+		"3d": "cubes"
+	},
+	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 || "image"]
+				}),
+				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)),
+				...attrs.attributions.length
+					? [
+						// last so can use grows
+						m("li.flexrow.col-6.col-xl-4", "")
+					] : []
+			]
+		)
+	);
+
+module.exports = TemplateLicenseWidget;

package/src/widgets.market/app.utils.js

@@ -0,0 +1,238 @@
+/* eslint-disable no-nested-ternary */
+/**
+ * Miscellaneous Time related utils
+ * @module app.utils
+ */
+
+// noinspection NpmUsedModulesInstalled
+const
+	m = require("mithril");
+
+function decodeTimeInterval(datems) {
+	const date = new Date(datems);
+	let seconds = Math.floor((Date.now() - date) / 1000);
+	let unit = "second";
+	let direction = "ago";
+	if (seconds < 0) {
+		seconds = -seconds;
+		direction = "from now";
+	}
+	let value = seconds;
+	if (seconds >= 31536000) {
+		value = Math.floor(seconds / 31536000);
+		unit = "year";
+	} else if (seconds >= 86400) {
+		value = Math.floor(seconds / 86400);
+		unit = "day";
+	} else if (seconds >= 3600) {
+		value = Math.floor(seconds / 3600);
+		unit = "hour";
+	} else if (seconds >= 60) {
+		value = Math.floor(seconds / 60);
+		unit = "minute";
+	}
+	if (value !== 1) {
+		unit += "s";
+	}
+	return {
+		value, unit, direction, future: direction !== "ago"
+	};
+}
+
+/**
+ * Gets an english expression for a date difference
+ * @param {number} datems Date in ms
+ * @param options
+ * @return {string} Expression of difference from now ("5 minutes ago")
+ * @public
+ * @static
+ */
+
+function getTimeInterval(datems, options = {}) {
+
+	const {
+		direction, value, unit, future
+	} = decodeTimeInterval(datems);
+
+	const lit = `${value} ${unit}`;
+
+	return options.short
+		? `${value} ${unit}`
+		: (
+			options.onlyfuture
+				? (
+					future
+						? (options.prefixFuture || "in ") + lit
+						: options.pastMessage
+				)
+				: `${value} ${unit} ${direction}`
+		);
+}
+
+function splitDuration(ms, len = 3) {
+
+	let offsecs = Math.floor(ms / 1000);
+	if (offsecs < 60 || len < 1) return { secs: offsecs };
+
+	let mins = Math.floor(offsecs / 60);
+
+	let
+		days = 0,
+		hours = 0;
+
+	offsecs %= 60;
+
+	if (mins >= 60 && len > 1) {
+		hours = Math.floor(mins / 60);
+		if (hours >= 24 && len > 2) {
+			days = Math.floor(hours / 24);
+			hours %= 24;
+		}
+		mins %= 60;
+	}
+	return {
+		days,
+		hours,
+		mins,
+		secs: offsecs
+	};
+}
+
+/**
+ * Gets a hours, muinutes, seconds expression
+ * @param {number} ms Date in ms
+ * @param {Array=} separators Separators to use
+ * @public
+ * @static
+ * @return {string} The expression, like 10h15m10s
+ */
+
+function getDuration(ms, separators) {
+
+	separators = separators || ["s", "m ", "h ", "d "];
+
+	const
+		[ss, sm, sh, sd] = separators,
+		len = separators.length,
+
+		{
+			days, hours, mins, secs
+		} = splitDuration(ms, len > 0 ? len - 1 : 0);
+
+	return [
+		...days ? [days + sd] : [],
+		...(hours || days) ? [hours + sh] : [],
+		...(mins || hours || days) ? [mins + sm] : [],
+		(secs + ss)
+	].join(" ");
+
+}
+
+/**
+ * Gets the system time string for a Date
+ * @param {number} ms Date in ms
+ * @public
+ * @static
+ * @return {string} System Locale time expression
+ */
+
+function getTime(ms) {
+	const d = new Date(ms);
+	return d.toLocaleTimeString("de"); // TODO
+}
+
+function getFormattedTime(startTime, asWidget, widgetTitle, classe) {
+// decide what to print in starttime cell
+	const measure = getTimeInterval(startTime);
+
+	// scheduled processes will print the finish time as the start time, and the start time as "expected"
+	return asWidget
+		? m("span.padh.numsmall" + (classe || ""), { "data-title": widgetTitle }, measure)
+		: measure;
+}
+
+function getStartTime(process, asWidget, ProcessListData) {
+// decide what to print in starttime cell
+	const measure = getTime(process.startTime);
+	let widgetTitle;
+
+	if (asWidget) {
+		switch (process.status) {
+			case ProcessListData.ST_SCHEDULED:
+				widgetTitle = "scheduled at";
+				break;
+			default:
+				widgetTitle = "started at";
+		}
+	}
+
+	// scheduled processes will print the finish time as the start time, and the start time as "expected"
+	return asWidget
+		? m("span.padh.numsmall", { "data-title": widgetTitle }, measure)
+		: measure;
+}
+
+// decide what to print in finishtime cell
+function getFinishTime(process, asWidget, ProcessListData) {
+
+	let measure;
+	let widgetTitle;
+
+	switch (process.status) {
+		case ProcessListData.ST_SCHEDULED:
+			measure = getTime(process.startTime);
+			widgetTitle = "scheduled at";
+			break;
+		case ProcessListData.ST_TERMINATED:
+			widgetTitle = "finish time";
+			measure = "---";
+			break;
+		default:
+			measure = process.status !== ProcessListData.ST_RUNNING
+				? getDuration(process.finishTime - process.startTime)
+				: getDuration(new Date().valueOf() - process.startTime);
+			widgetTitle = process.status !== ProcessListData.ST_RUNNING ? "ran for" : "running for";
+	}
+	return asWidget
+		? m("span.padh.numsmall", { "data-title": widgetTitle }, measure)
+		: measure;
+
+}
+
+const REGEXP = /^[A-Za-z0-9_-]+$/;
+
+/**
+ * Whether a string is alphanumeric
+ * @param {string} str string to check
+ * @public
+ * @static
+ * @return {boolean} Whether
+ */
+
+function isAlphanumeric(str) {
+	return !!(str.match(REGEXP));
+}
+
+// noinspection JSUnusedGlobalSymbols
+Object.assign(exports, {
+	/**
+	 * Time Utilities Library
+	 */
+	TimeUtils: {
+		getTimeInterval,
+		decodeTimeInterval,
+		getDuration,
+		splitDuration,
+		getFormattedTime,
+		getFinishTime,
+		getStartTime,
+		getTime
+	},
+	/**
+	 * String Utilities
+	 */
+	StringUtils: {
+		isAlphanumeric
+	}
+
+});

package/src.website/css/app/animations.css

@@ -0,0 +1,27 @@
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeout {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.fadein {
+    animation: fadein 0.5s;
+    animation-fill-mode: forwards;
+}
+
+.fadeout {
+    animation: fadeout 0.5s;
+    animation-fill-mode: forwards;
+}

package/src.website/css/app/ismobile.css

@@ -0,0 +1,7 @@
+.ismobile .no-mobile {
+    display: none;
+}
+
+html:not(.ismobile) .no-desktop {
+    display: none;
+}

package/src.website/css/app/style.css

@@ -0,0 +1,51 @@
+body {
+    font-family: sans-serif;
+    background: var(--window-background);
+    margin: 0;
+    padding: 0;
+    color: var(--text);
+    height: auto !important;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.rootlink {
+    margin-left: -0.5rem;
+    cursor: pointer;
+}
+
+
+.rootlink i {
+    width: 2rem;
+}
+
+.rootlink span {
+    padding-left: 0.5rem;
+}
+
+.rootlink button {
+    border: 0;
+    background: 0;
+}
+
+.tab-menu button {
+    border: 0;
+    background: 0;
+}
+
+
+button, a {
+    outline: none !important;
+}
+
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.fullheight {
+    height: -webkit-fill-available;
+}

package/src.website/css/app/style.fullheight.css

@@ -0,0 +1,9 @@
+html {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+#main {
+    height: 100vh !important;
+}
+

package/src.website/css/app/style.mdblocks.css

@@ -0,0 +1,59 @@
+md-notice {
+    background: var(--accent-light);
+    border-radius: 0.25rem;
+    position: relative;
+    border: solid 1px var(--border-color);
+    padding: 0.75rem 0.75rem 0.75rem 2.75rem;
+    display: inline-block;
+}
+
+md-notice:before {
+    font-family: "Font Awesome 5 Free";
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 0.6rem 0.75rem;
+}
+
+md-yt {
+    width: 100%;
+    height: auto;
+    padding-top: 56.25%;
+    position: relative;
+    display: block;
+    border-radius: 0.25rem;
+    overflow: hidden;
+    background-size: cover;
+    background-position: center;
+    color: white;
+}
+
+md-yt iframe {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+}
+
+md-flex {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    border: solid 1px var(--border-color);
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+}
+
+md-flex md-wrap {
+    flex-grow: 1;
+    min-width: 320px;
+    width: 50%;
+    padding: 0.25rem;
+}
+
+.tablecontainer {
+    overflow-x: auto !important;
+}