Create new templates! (#13)

* Use main node image & upgrade fabric

* prettier

* create new templates

* fix merge conflict

Author: OllysCoding

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
+}

README.md

@@ -4,6 +4,13 @@ Bumper content are clips which can be used inbetween the main content of your TV
 
 A file is output for each channel on your service, and which is replaced each time a new show starts (with an updated bumper based on what will be playing next). This content can then be imported in your chosen IPTV service.
 
+---
+
+<h2 align=center>🛠️ Project under active development 🛠️</h2>
+<p align=center>There is no official release yet (though dev releases are available on <code>ollyscoding/bumpgen-test:&lt;commit-sha&gt;</code>), and breaking changes will be actively made until v0.1 is released</p>
+
+---
+
 ## Getting Started
 
 You can run bumpgen through docker compose, create a docker compose file from the [the template](./docs/compose.yml).
@@ -13,3 +20,36 @@ You'll need to update the `/path/to/your/output` and `/path/to/your/background-c
 If you haven't already, create the config directory, then create a file called `bumpgen.config.json` within it, and copy across the contents of [bumpgen.config.example.json](./configs/bumpgen.config.example.json). Then add the URL for your XML TV file, and change any other settings as desired.
 
 You should now be good to go, run `docker compose up -d` to get started!
+
+### Templates
+
+Bumpgen offers a number of default templates to use for your channels, as well as exerimental plugin support if you want to develop your own templates.
+
+<table>
+  <tr>
+    <th>Name</th>
+    <th>Example</th>
+  </tr>
+  <tr>
+    <td><code>centre-title-and-time</code></td>
+    <td><img src="./docs/screenshots/template_centre-title-and-time.png"  width=500px></td>
+   </tr> 
+   <tr>
+      <td><code>left-panel-info</code></td>
+      <td><img src="./docs/screenshots/template_left-panel-info.png"  width=500px></td>
+  </td>
+   <tr>
+      <td><code>left-panel-next-five</code></td>
+      <td><img src="./docs/screenshots/template_left-panel-next-five.png"  width=500px></td>
+  </td>
+  </tr>
+</table>
+
+## What's still needed for MVP?
+
+- Give templates all upcoming shows not just the next one & build 'left-panel-next-5' template
+- Options for resolution (per channel)
+- Option for length including \* as 'fill'
+- Plugins: some kind of versioning + publish types + example repo + language/locale in template
+- Frontend for configuring
+- Allow animations?

apps/backend/src/canvas2video/types.ts

@@ -32,7 +32,7 @@ type makeSceneFunction = (
   canvas: fabric.StaticCanvas,
   anim: gsap.core.Timeline,
   compose: () => void,
-) => void;
+) => Promise<void>;
 
 export interface RendererConfig {
   width: number;

apps/backend/src/config/app.ts

@@ -12,7 +12,7 @@ addFormats(ajv);
 
 type ChannelId = string;
 export interface ChannelConfig {
-  template: "centre-title-and-time";
+  template: string;
   backgroundContent: "*" | string[];
 }
 
@@ -54,7 +54,7 @@ const schema: JSONSchemaType<AppConfig> = {
         properties: {
           template: {
             type: "string",
-            enum: ["centre-title-and-time"],
+            // enum: ["centre-title-and-time"],
           },
           backgroundContent: {
             oneOf: [

apps/backend/src/jobs/main.ts

@@ -1,6 +1,6 @@
 import {
   fetchAndParseXmlTv,
-  getNextProgrammeForChannel,
+  getNextProgrammesForChannel,
   getValueForConfiguredLang,
 } from "../xmltv/index.js";
 import {
@@ -12,7 +12,7 @@ import {
   type Result,
 } from "../result/index.js";
 import {
-  createOverlayConfigFromProgramme,
+  createProgrammeInfoFromProgrammes,
   makeVideo,
 } from "../video-generator/index.js";
 import { appConfig, type ChannelConfig } from "../config/app.js";
@@ -67,14 +67,17 @@ const channelTask = async (
   programmes: XmltvProgramme[],
   channelConfig: ChannelConfig,
 ): ReturnType<typeof makeVideo> => {
-  const currentProgramme = getNextProgrammeForChannel(channel, programmes);
-  if (isFailure(currentProgramme)) {
-    return failure("Failed to get next programme", currentProgramme.error);
+  const nextProgrammes = getNextProgrammesForChannel(channel, programmes);
+  if (isFailure(nextProgrammes)) {
+    return failure("Failed to get next programme", nextProgrammes.error);
   }
 
-  const overlay = createOverlayConfigFromProgramme(currentProgramme.result);
-  if (isFailure(overlay)) {
-    return failure("Failed to get overlay config", overlay.error);
+  const programmeInfo = createProgrammeInfoFromProgrammes(
+    nextProgrammes.result,
+  );
+
+  if (isFailure(programmeInfo)) {
+    return failure("Failed to get overlay config", programmeInfo.error);
   }
 
   const backgroundContentPath =
@@ -90,7 +93,7 @@ const channelTask = async (
 
   return makeVideo({
     template: template.result,
-    overlay: overlay.result,
+    programmes: programmeInfo.result,
     outputDir: appConfig.outputFolder,
     outputFileName: `channel-${channel.id}.mp4`,
     length: 20,

apps/backend/src/video-generator/index.ts

@@ -1,5 +1,7 @@
 import type { XmltvProgramme } from "@iptv/xmltv";
-import type { FabricTemplate } from "bumpgen-shared/types";
+import type { FabricTemplate, ProgrammeInfo } from "bumpgen-shared/types";
+import { isNotUndefined } from "bumpgen-shared/utils";
+
 import {
   failure,
   isFailure,
@@ -22,15 +24,6 @@ import { logDebug, logError } from "../logger/index.js";
 import { existsSync } from "node:fs";
 import { Fonts } from "../fonts/index.js";
 
-export interface VideoOverlay {
-  title: string;
-  subtitle?: string;
-  episode?: string;
-  description?: string;
-  iconUrl?: string;
-  start?: Date;
-}
-
 export interface ChannelInfo {
   id: string;
   name?: string;
@@ -44,7 +37,7 @@ export interface VideoBackground {
 
 export interface VideoOptions {
   channelInfo: ChannelInfo;
-  overlay: VideoOverlay;
+  programmes: [ProgrammeInfo, ...ProgrammeInfo[]];
   background?: VideoBackground;
   outputDir: string;
   outputFileName: string;
@@ -72,7 +65,7 @@ const getBackgroundVideoStartAndEnd = (
 };
 
 const getProgrammeId = (options: VideoOptions) =>
-  `${options.overlay.title}-${options.overlay.episode}`;
+  `${options.programmes[0].title}-${options.programmes[0].episode}`;
 
 const shouldGenerateVideo = async (
   options: VideoOptions,
@@ -134,8 +127,8 @@ export const makeVideo = async (
       width,
       height,
       fps: 1,
-      makeScene: (fabric, canvas, anim, compose) => {
-        options.template(options.overlay, {
+      makeScene: async (fabric, canvas, anim, compose) => {
+        await options.template(options.programmes, {
           getFontProperties: (...args) => Fonts.getFontProperties(...args),
           convertX: (val: number) => val * width,
           convertY: (val: number) => val * height,
@@ -183,25 +176,46 @@ export const makeVideo = async (
   }
 };
 
-export const createOverlayConfigFromProgramme = (
-  programme: XmltvProgramme,
-): Result<VideoOverlay> => {
-  const title = getValueForConfiguredLang(programme.title);
-  if (isFailure(title)) {
-    return failure("Title required to create overlay");
+export const createProgrammeInfoFromProgrammes = (
+  programmes: [XmltvProgramme, ...XmltvProgramme[]],
+): Result<[ProgrammeInfo, ...ProgrammeInfo[]]> => {
+  const createProgrammeInfo = (
+    programme: XmltvProgramme,
+  ): Result<ProgrammeInfo> => {
+    const title = getValueForConfiguredLang(programme.title);
+    if (isFailure(title)) {
+      return failure("Title required to create overlay");
+    }
+
+    const subtitle = getValueForConfiguredLang(programme.subTitle);
+    const episode = getOnScreenEpisodeNumber(programme.episodeNum);
+    const description = getValueForConfiguredLang(programme.desc);
+    const iconUrl = getBestIcon(programme.icon);
+
+    return success({
+      title: title.result,
+      subtitle: unwrap(subtitle),
+      episode: unwrap(episode),
+      description: unwrap(description),
+      start: programme.start,
+      end: programme.stop,
+      iconUrl: unwrap(iconUrl),
+    });
+  };
+
+  const firstItemResult = createProgrammeInfo(programmes[0]);
+
+  if (isFailure(firstItemResult)) {
+    // Pass on the failure
+    return firstItemResult;
   }
 
-  const subtitle = getValueForConfiguredLang(programme.subTitle);
-  const episode = getOnScreenEpisodeNumber(programme.episodeNum);
-  const description = getValueForConfiguredLang(programme.desc);
-  const iconUrl = getBestIcon(programme.icon);
-
-  return success({
-    title: title.result,
-    subtitle: unwrap(subtitle),
-    episode: unwrap(episode),
-    description: unwrap(description),
-    start: programme.start,
-    iconUrl: unwrap(iconUrl),
-  });
+  return success([
+    firstItemResult.result,
+    ...programmes
+      .slice(1)
+      .map(createProgrammeInfo)
+      .map(unwrap)
+      .filter(isNotUndefined),
+  ]);
 };

apps/backend/src/xmltv/index.ts

@@ -21,7 +21,9 @@ export const fetchAndParseXmlTv = async (
   try {
     const response = await fetch(path);
     const body = await response.text();
-    const xmlTv = parseXmltv(body);
+    // Fix a weird bug where the apostrophe specifically isn't decoded
+    const bodyFixed = body.replaceAll("'", "'");
+    const xmlTv = parseXmltv(bodyFixed);
 
     const { channels, programmes } = xmlTv;
     if (!channels) {
@@ -40,29 +42,32 @@ export const fetchAndParseXmlTv = async (
   }
 };
 
-export const getNextProgrammeForChannel = (
+export const getNextProgrammesForChannel = (
   channel: XmltvChannel,
   programmes: XmltvProgramme[],
-): Result<XmltvProgramme> => {
+): Result<[XmltvProgramme, ...XmltvProgramme[]]> => {
   const forChannel = programmes.filter((p) => p.channel === channel.id);
   const sorted = [...forChannel].sort((a, b) => {
     return a.start.getTime() - b.start.getTime();
   });
 
-  const current = sorted.find((programme) => {
+  const nextUpIndex = sorted.findIndex((programme) => {
     if (Date.now() < programme.start.getTime()) return true;
     else return false;
   });
 
-  if (current) {
-    return success(current);
-  } else {
+  if (nextUpIndex === -1) {
     logDebug("Failed to find current program for channel " + channel.id);
     return failure(
       "Failed to find current programme playing on channel with id " +
         channel.id,
     );
   }
+
+  return success([
+    programmes[nextUpIndex]!,
+    ...programmes.slice(nextUpIndex + 1),
+  ]);
 };
 
 export const getOnScreenEpisodeNumber = (