add reels

VERSION

-2.11.0
+2.12.0

frontend/src/views/reel/Reel.vue

@@ -44,13 +44,14 @@ export default {
           background: COLORS.black,
           mainText: COLORS.white,
           highlightedText: COLORS.yellow1,
-          contractedByText: COLORS.black
+          contractedByText: COLORS.white
         },
       },
     };
 
     return {
       mainText: null,
+      nameText: null,
       mainImage: null,
       contractedBy: DEFAULT_CONTRACTOR,
       gradientHeightMultiplier: 1,
@@ -70,6 +71,7 @@ export default {
       const canvasProperties = {
         mainImage: this.mainImage,
         mainText: this.mainText,
+        nameText: this.nameText,
         contractedBy: this.contractedBy,
         colors: this.colors,
       };
@@ -86,7 +88,7 @@ export default {
   },
   mounted() {
     this.$watch(
-      (vm) => [vm.mainText, vm.contractedBy, vm.colors],
+      (vm) => [vm.mainText, vm.nameText, vm.contractedBy, vm.colors],
       async (value) => {
         if (this.autoRedraw) {
           await this.reloadCanvasProperties();
@@ -138,12 +140,19 @@ export default {
           zIndex="10"
         />
 
+        <ShortTextInput
+          name="Jméno"
+          v-model="nameText"
+          :important="false"
+          zIndex="9"
+        />
+
         <LongTextInput
           name="Text"
           v-model="mainText"
           :important="true"
           :highlightable="true"
-          zIndex="9"
+          zIndex="8"
         />
 
         <ShortTextInput

frontend/src/views/reel/canvas.js

@@ -8,20 +8,21 @@ import {
 import COLORS from "../../colors";
 import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
 
-import bgImageSource from "../../assets/template/social_cover_large_text/background.png";
+import logoImageSource from "../../assets/logos/default-light.png";
 
 let mainImage = null;
+let logoImage = null;
 let mainImageSource = null;
 let contractedByTextbox = null;
 let mainTextBox = null;
+let nameText = null;
 
 const redraw = async (canvas, options) => {
-  clearObjects([contractedByTextbox, mainTextBox], canvas);
+  clearObjects([contractedByTextbox, mainTextBox, nameText], canvas);
 
-  const contractedByTextSize = Math.ceil(canvas.height * 0.01);
-  const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
-  const contractedByTextBottomMargin = Math.ceil(canvas.width * 0.02);
-  const contractedByTextSideMargin = Math.ceil(canvas.width * 0.03);
+  const contractedByTextSize = Math.ceil(canvas.height * 0.013);
+  const contractedByTextBottomMargin = Math.ceil(canvas.width * 0.04);
+  const contractedByTextSideMargin = Math.ceil(canvas.width * 0.05);
 
   const mainTextMarginTop = Math.ceil(canvas.height * 0.15);
   const mainTextMarginLeft = Math.ceil(canvas.width * 0.05);
@@ -30,6 +31,13 @@ const redraw = async (canvas, options) => {
   const mainTextMaxLines = 7;
   const mainTextLineHeight = 0.85;
 
+  const nameTextMarginLeft = Math.ceil(canvas.width * 0.05);
+  const nameTextMarginTop = Math.ceil(canvas.height * 0.1);
+  const nameTextSize = Math.ceil(canvas.height * 0.05);
+
+  const logoWidth = Math.ceil(canvas.width * 0.3);
+  const logoSideMargin = Math.ceil(canvas.width * 0.04);
+
   canvas.preserveObjectStacking = true;
 
   /* BEGIN Main image render */
@@ -70,6 +78,22 @@ const redraw = async (canvas, options) => {
 
   /* END Main image render */
 
+  /* BEGIN Name text render */
+
+  if (options.nameText !== null) {
+    nameText = new fabric.Text(`${options.nameText}:`, {
+      left: nameTextMarginLeft,
+      top: nameTextMarginTop,
+      fontFamily: "Bebas Neue",
+      fontSize: nameTextSize,
+      fill: "#fff",
+      selectable: false,
+      zIndex: 40,
+    });
+
+    canvas.add(nameText);
+  }
+
   /* BEGIN Main text render */
 
   if (options.mainText !== null) {
@@ -105,6 +129,37 @@ const redraw = async (canvas, options) => {
 
   /* END Main text render */
 
+  /* BEGIN Logo render */
+
+  if (logoImage === null) {
+    if (logoImage !== null) {
+      canvas.remove(logoImage);
+    }
+
+    const logoImageElement = new Image();
+
+    await new Promise((resolve) => {
+      logoImageElement.onload = () => {
+        resolve();
+      };
+
+      logoImageElement.src = logoImageSource;
+    });
+
+    logoImage = new fabric.Image(logoImageElement, { selectable: false });
+    logoImage.scaleToWidth(logoWidth);
+
+    logoImage.set({
+      left: logoSideMargin,
+      top: canvas.height - logoSideMargin - logoImage.getScaledHeight(),
+      zIndex: 11,
+    });
+
+    canvas.add(logoImage);
+  }
+
+  /* END Logo render */
+
   /* BEGIN Contracted by render */
 
   if (options.contractedBy !== null) {