Merge pull request #23 from vassbo/dev

0.3.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "freeshow",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "private": true,
   "main": "build/electron/index.js",
   "description": "An application for showing song lyrics and more for free!",
@@ -41,10 +41,8 @@
     "productName": "FreeShow",
     "files": [
       "build/public/**/*",
-      "build/types/**/*",
       "build/electron/**/*",
-      "src/electron/**/*",
-      "dist/**/*",
+      "build/types/**/*",
       "public/**/*"
     ],
     "mac": {

public/lang/en.json

@@ -429,7 +429,8 @@
     "video": "Video",
     "live": "Live",
     "audio": "Audio",
-    "timer": "Timer"
+    "timer": "Timer",
+    "icon": "Icon"
   },
   "borders": {
     "solid": "Solid",

public/lang/no.json

@@ -241,7 +241,7 @@
     "events": "Hendelser",
     "pictures": "Bilder",
     "videos": "Videoer",
-    "offers": "Offer",
+    "offers": "Kollekt",
     "notice": "Merk",
     "visuals": "Visuelt"
   },
@@ -429,7 +429,8 @@
     "video": "Video",
     "live": "Direkte",
     "audio": "Lyd",
-    "timer": "Nedtelling"
+    "timer": "Nedtelling",
+    "icon": "Ikon"
   },
   "borders": {
     "solid": "Hel",

public/lang/sk.json

@@ -429,7 +429,8 @@
     "video": "Video",
     "live": "Naživo",
     "audio": "Audio",
-    "timer": "Časovač"
+    "timer": "Časovač",
+    "icon": "Icon"
   },
   "borders": {
     "solid": "Plná",

src/frontend/components/drawer/media/MediaLoader.svelte

@@ -15,7 +15,7 @@
   export let videoElem: any = null
 
   // TODO: update
-  $: if (type === "image") duration = 0
+  $: if (!type || type === "image") duration = 0
 
   // type
   $: {

src/frontend/components/drawer/player/Player.svelte

@@ -60,6 +60,7 @@
               on:click={() => activeShow.set({ id: video.rid, type: "player" })}
               on:dblclick={() => outBackground.set({ id: video.rid, type: "player" })}
               active={$activeShow?.id === video.rid}
+              outline={$outBackground?.id === video.rid}
               bold={false}
               border
             >

src/frontend/components/edit/EditTools.svelte

@@ -37,7 +37,8 @@
     active = "items"
     tabs.text.disabled = true
   } else if ((item?.lines || item?.type === "timer") && tabs.text.disabled) {
-    active = "text"
+    // TODO: false triggers (arranging items)
+    // active = "text"
     tabs.text.disabled = false
   }
   $: if (!allSlideItems.length && !tabs.item.disabled) {

src/frontend/components/edit/Editbox.svelte

@@ -37,19 +37,20 @@
       e.altKey ||
       e.buttons === 4
     ) {
-      let item = e.target.closest(".item")
+      let target = e.target.closest(".item")
       mouse = {
         x: e.clientX,
         y: e.clientY,
-        width: item.offsetWidth,
-        height: item.offsetHeight,
+        width: target.offsetWidth,
+        height: target.offsetHeight,
         offset: {
-          x: (e.clientX - e.target.closest(".slide").offsetLeft) / ratio - item.offsetLeft,
-          y: (e.clientY - e.target.closest(".slide").offsetTop) / ratio - item.offsetTop,
-          width: e.clientX / ratio - item.offsetWidth,
-          height: e.clientY / ratio - item.offsetHeight,
+          x: (e.clientX - e.target.closest(".slide").offsetLeft) / ratio - target.offsetLeft,
+          y: (e.clientY - e.target.closest(".slide").offsetTop) / ratio - target.offsetTop,
+          width: e.clientX / ratio - target.offsetWidth,
+          height: e.clientY / ratio - target.offsetHeight,
         },
         item,
+        // item: target,
         e: e,
       }
     }

src/frontend/components/edit/OverlayEditor.svelte

@@ -15,6 +15,7 @@
 
   $: currentId = $activeEdit.id!
   $: Slide = $overlays[currentId]
+  overlays.subscribe((a) => (Slide = a[currentId]))
 
   let lines: [string, number][] = []
   let mouse: any = null

src/frontend/components/edit/Slides.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { showsCache, activeShow, activeEdit } from "../../stores"
+  import { showsCache, activeShow, activeEdit, outSlide } from "../../stores"
   import { GetLayout } from "../helpers/get"
   import T from "../helpers/T.svelte"
   import Slide from "../slide/Slide.svelte"
@@ -89,7 +89,8 @@
           layoutSlide={slide}
           index={i}
           color={slide.color}
-          active={$activeEdit.slide === i}
+          active={$outSlide?.index === i && $outSlide?.id === $activeShow?.id && $outSlide?.layout === activeLayout}
+          focused={$activeEdit.slide === i}
           noQuickEdit
           {columns}
           on:click={(e) => {

src/frontend/components/edit/TemplateEditor.svelte

@@ -15,6 +15,7 @@
 
   $: currentId = $activeEdit.id!
   $: Slide = $templates[currentId]
+  templates.subscribe((a) => (Slide = a[currentId]))
 
   let lines: [string, number][] = []
   let mouse: any = null
@@ -62,6 +63,8 @@
     let items = Slide.items
     if (items) autoSize(active, items)
   }
+
+  $: console.log(Slide)
 </script>
 
 <div class="parent" bind:offsetWidth={width} bind:offsetHeight={height}>

src/frontend/components/edit/tools/ItemStyle.svelte

@@ -22,7 +22,7 @@
     top: 0,
     width: 300,
     height: 150,
-    transform: null,
+    transform: 0,
     // border
     "border-color": "#FFFFFF",
     "border-width": 0,
@@ -58,6 +58,7 @@
   }
 
   const inputChange = (e: any, key: string) => update(key, e.target.value)
+  const rotate = (key: string) => update("transform", "rotate(" + key + "deg)")
 
   function update(key: string, style: any) {
     if (key.includes("shadow")) {
@@ -99,12 +100,23 @@
       values.push(addStyleString(allSlideItems[itemIndex].style, [key, style]))
     })
 
-    history({
-      id: "setItems",
-      oldData: { style: { key: "style", values: oldValues } },
-      newData: { style: { key: "style", values } },
-      location: { page: "edit", show: $activeShow!, slide: GetLayout()[$activeEdit.slide!].id, items: allItems },
-    })
+    if (!values.length) return
+
+    if ($activeEdit.id) {
+      history({
+        id: $activeEdit.type === "template" ? "updateTemplate" : "updateOverlay",
+        oldData: { key: "items", data: oldValues },
+        newData: { key: "items", data: values },
+        location: { page: "edit", id: $activeEdit.id, items: allItems },
+      })
+    } else {
+      history({
+        id: "setItems",
+        oldData: { style: { key: "style", values: oldValues } },
+        newData: { style: { key: "style", values } },
+        location: { page: "edit", show: $activeShow!, slide: GetLayout()[$activeEdit.slide!].id, items: allItems },
+      })
+    }
   }
 </script>
 
@@ -125,7 +137,7 @@
       <NumberInput value={data["top"]} on:change={(e) => update("top", e.detail)} />
       <NumberInput value={data["width"]} on:change={(e) => update("width", e.detail)} />
       <NumberInput value={data["height"]} on:change={(e) => update("height", e.detail)} />
-      <NumberInput value={data["transform"]} on:change={(e) => update("transform", e.detail)} />
+      <NumberInput value={data["transform"]} on:change={(e) => rotate(e.detail)} />
     </span>
   </div>
   <hr />

src/frontend/components/edit/tools/Items.svelte

@@ -1,14 +1,48 @@
 <script lang="ts">
   import type { Item } from "../../../../types/Show"
-  import { activeEdit, activePopup, dictionary, selected } from "../../../stores"
+  import { activeEdit, activePopup, activeShow, dictionary, overlays, selected, showsCache, templates } from "../../../stores"
+  import { history } from "../../helpers/history"
   import Icon from "../../helpers/Icon.svelte"
+  import { _show } from "../../helpers/shows"
   import T from "../../helpers/T.svelte"
   import Button from "../../inputs/Button.svelte"
   import IconButton from "../../inputs/IconButton.svelte"
   import Panel from "../../system/Panel.svelte"
   import { addItem } from "../scripts/addItem"
 
   export let allSlideItems: Item[]
+  $: invertedItemList = JSON.parse(JSON.stringify(allSlideItems)).reverse()
+
+  $: console.log(allSlideItems, invertedItemList)
+
+  function move(index: number) {
+    let items = []
+    let slideID = null
+    if ($activeEdit.type === "overlay") items = JSON.parse(JSON.stringify($overlays[$activeEdit.id!]?.items))
+    else if ($activeEdit.type === "template") items = JSON.parse(JSON.stringify($templates[$activeEdit.id!]?.items))
+    else {
+      let slides = $showsCache[$activeShow?.id!]?.slides
+      slideID = _show("active").layouts("active").ref()[0][$activeEdit.slide!].id
+      items = JSON.parse(JSON.stringify(slides[slideID].items))
+    }
+
+    let oldItems = items
+
+    // move in array (to, from)
+    items.splice(index, 0, items.splice(index + 1, 1)[0])
+
+    // update
+    if ($activeEdit.type === "overlay" || $activeEdit.type === "template") {
+      history({
+        id: $activeEdit.type === "template" ? "updateTemplate" : "updateOverlay",
+        oldData: { key: "items", data: oldItems },
+        newData: { key: "items", data: items },
+        location: { page: "edit", id: $activeEdit.id },
+      })
+    } else {
+      _show("active").slides([slideID]).set({ key: "items", value: items })
+    }
+  }
 </script>
 
 <Panel>
@@ -26,6 +60,7 @@
     <Button
       id="button"
       style="width: 100%;"
+      title={$dictionary.items?.icon}
       on:click={() => {
         selected.set({ id: "slide", data: [{ ...$activeEdit }] })
         activePopup.set("icon")
@@ -40,18 +75,38 @@
   <hr />
   <h6><T id="edit.arrange_items" /></h6>
   <div class="items" style="display: flex;flex-direction: column;">
-    {#each allSlideItems as currentItem, i}
+    {#each invertedItemList as currentItem, i}
+      {@const index = invertedItemList.length - i - 1}
       <Button
-        active={$activeEdit.items.includes(i)}
-        on:click={() =>
-          activeEdit.update((ae) => {
-            if (ae.items.includes(i)) ae.items.splice(ae.items.indexOf(i), 1)
-            else ae.items.push(i)
-            return ae
-          })}
+        style="width: 100%;justify-content: space-between;"
+        active={$activeEdit.items.includes(index)}
+        dark
+        on:click={(e) => {
+          if (!e.target?.closest(".up")) {
+            activeEdit.update((ae) => {
+              if (e.ctrlKey) {
+                if (ae.items.includes(index)) ae.items.splice(ae.items.indexOf(index), 1)
+                else ae.items.push(index)
+              } else if (!ae.items.includes(index)) ae.items = [index]
+              else ae.items = []
+              return ae
+            })
+          }
+        }}
       >
-        <Icon id={currentItem.type || "item"} />
-        <p>{i}</p>
+        <span style="display: flex;">
+          <p style="margin-right: 10px;">{i + 1}</p>
+          <Icon id={currentItem.type || "text"} />
+          <p style="margin-left: 10px;">{$dictionary.items?.[currentItem.type || "text"]}</p>
+        </span>
+        <!-- {#if i < allSlideItems.length - 1}
+          <Icon id="down" />
+        {/if} -->
+        {#if i > 0}
+          <Button class="up" on:click={() => move(index)}>
+            <Icon id="up" />
+          </Button>
+        {/if}
       </Button>
     {/each}
   </div>
@@ -64,10 +119,6 @@
 
 <!-- TODO: select item / bring to center / delete ...  -->
 <style>
-  .items :global(button) {
-    width: 100%;
-  }
-
   .grid {
     display: flex;
     /* gap: 10px; */
@@ -78,4 +129,8 @@
     background-color: var(--primary-darker);
     padding: 20px;
   }
+
+  .items p {
+    width: auto;
+  }
 </style>