fix overlay position not being saved +

some other problems like the overlay not showing up when the game is not
WoWS, and the vote overlay not showing up when the game is WoWS but the
API is not available.

backend/lib/backend/stream/channel.ex

@@ -11,7 +11,7 @@ defmodule Backend.Stream.Channel do
     field(:wows_account_id, :integer)
     field(:wows_realm, :string)
 
-    field(:overlay_position, Ecto.Enum, values: [:top_left, :top_right, :bottom_left, :bottom_right], default: :top_left)
+    field(:overlay_position, Ecto.Enum, values: [:top_left, :top_right], default: :top_left)
 
     field(:vote_status_delay, :integer, virtual: true)
     field(:vote_progress_delay, :integer, virtual: true)
@@ -37,7 +37,7 @@ defmodule Backend.Stream.Channel do
   def changeset(channel, attrs) do
     channel
     |> cast(attrs, [:id, :wows_username, :wows_account_id, :wows_realm, :overlay_position])
-    |> validate_required([:id, :wows_username, :wows_account_id, :wows_realm, :overlay_position])
+    |> validate_required([:id, :wows_username, :wows_account_id, :wows_realm])#, :overlay_position])
     |> validate_inclusion(:wows_realm, ["ru", "eu", "na", "asia"])
     |> unique_constraint(:id, name: :channels_pkey)
   end

backend/lib/backend_web/controllers/channel_controller.ex

@@ -136,7 +136,7 @@ defmodule BackendWeb.ChannelController do
       ConCache.delete(:channel_cache, id)
 
       # notify active clients
-      Twitch.Api.broadcast_message(channel.id, "channel_update", %{
+      Backend.Twitch.Api.broadcast_message(channel.id, "channel_update", %{
         overlay_position: channel.overlay_position
       })
 

frontend/src/apps/video_overlay/App.svelte

@@ -13,18 +13,50 @@
   let channel: Writable<Channel> = writable();
 
   let hidden = false;
+  let gameIsWows = false;
   const pubSubHandler = new PubSubHandler();
 
   onMount(() => {
     pubSubHandler.init();
 
     let loadingChannel = false;
+    let hasContext = false;
+
+    api.subscribe(async ($api) => {
+      if (!$api) {
+        return;
+      }
+
+      if (loadingChannel) {
+        return;
+      }
+
+      if (hasContext && !gameIsWows) {
+        console.log("game is not wows, not getting channel info");
+        return;
+      }
+
+      loadingChannel = true;
+
+      console.info("starting shipvote session after api became available");
+
+      console.log($api);
+
+      $channel = await $api.getChannelInfo();
+    });
 
     window.Twitch.ext.onContext(async (data, changed) => {
+      hasContext = true;
+      gameIsWows = data.game === "World of Warships";
+
       if (data.game !== "World of Warships") {
         // console.log("game is not WoWS");
         return;
       }
+      if (!$api) {
+        console.error("Game is WoWS, but API is not available");
+        return;
+      }
 
       if (!$channel) {
         if (loadingChannel) {
@@ -34,11 +66,6 @@
         loadingChannel = true;
         console.info("Starting Shipvote session");
 
-        if (!$api) {
-          console.error("Game is WoWS, but API is not available");
-          return;
-        }
-
         $channel = await $api.getChannelInfo();
       }
     });
@@ -73,48 +100,50 @@
   });
 </script>
 
-{#await $warships then $warships}
-  {#if $vote}
-    {#if $vote.status === "open"}
-      <div
-        class="fixed"
-        class:left-0={$channel.overlay_position.endsWith("left")}
-        class:right-0={$channel.overlay_position.endsWith("right")}
-        class:top-0={$channel.overlay_position.startsWith("top")}
-        class:bottom-0={$channel.overlay_position.startsWith("bottom")}
-      >
-        <VoteProgressOverlay {vote} warships={$warships} />
-      </div>
-      {#if !hidden}
+{#if $channel}
+  {#await $warships then $warships}
+    {#if $vote}
+      {#if $vote.status === "open"}
         <div
-          class="flex h-full items-center justify-center overflow-hidden py-16"
-          in:scale={{ duration: 300 }}
-          out:scale={{ duration: 300 }}
+          class="fixed"
+          class:left-0={$channel.overlay_position.endsWith("left")}
+          class:right-0={$channel.overlay_position.endsWith("right")}
+          class:top-0={$channel.overlay_position.startsWith("top")}
+          class:bottom-0={$channel.overlay_position.startsWith("bottom")}
         >
-          <div class="relative w-full max-w-2xl text-white">
-            <div
-              class="relative z-20 h-full rounded-xl bg-gradient-to-b from-cyan-800 to-cyan-950 p-4 pt-2 opacity-80 transition-all duration-300 hover:opacity-100"
-            >
-              <div class="max-h-64 overflow-y-auto">
-                <VoteForShip
-                  vote={$vote}
-                  warships={$warships}
-                  close={() => (hidden = true)}
-                />
-
-                <div
-                  class="mt-4 rounded-lg bg-cyan-950 px-2 py-1 text-xs opacity-50"
-                >
-                  <CreatorBanner />
+          <VoteProgressOverlay {vote} warships={$warships} />
+        </div>
+        {#if !hidden}
+          <div
+            class="flex h-full items-center justify-center overflow-hidden py-16"
+            in:scale={{ duration: 300 }}
+            out:scale={{ duration: 300 }}
+          >
+            <div class="relative w-full max-w-2xl text-white">
+              <div
+                class="relative z-20 h-full rounded-xl bg-gradient-to-b from-cyan-800 to-cyan-950 p-4 pt-2 opacity-80 transition-all duration-300 hover:opacity-100"
+              >
+                <div class="max-h-64 overflow-y-auto">
+                  <VoteForShip
+                    vote={$vote}
+                    warships={$warships}
+                    close={() => (hidden = true)}
+                  />
+
+                  <div
+                    class="mt-4 rounded-lg bg-cyan-950 px-2 py-1 text-xs opacity-50"
+                  >
+                    <CreatorBanner />
+                  </div>
                 </div>
               </div>
+              <div
+                class="absolute -inset-1 z-10 rounded-md bg-gradient-to-br from-blue-500/50 via-sky-800/60 to-cyan-600/50 blur-md"
+              />
             </div>
-            <div
-              class="absolute -inset-1 z-10 rounded-md bg-gradient-to-br from-blue-500/50 via-sky-800/60 to-cyan-600/50 blur-md"
-            />
           </div>
-        </div>
+        {/if}
       {/if}
     {/if}
-  {/if}
-{/await}
+  {/await}
+{/if}

frontend/src/lib/components/VideoOverlaySettings.svelte

@@ -12,10 +12,10 @@
   let channelUpdateFeedback = "";
 
   const options = [
-    ["top_left", "Top Left"],
-    ["top_right", "Top Right"],
-    ["bottom_left", "Bottom Left"],
-    ["bottom_right", "Bottom Right"],
+    ["top_left", "Top Left", true],
+    ["top_right", "Top Right", true],
+    ["bottom_left", "Bottom Left", false],
+    ["bottom_right", "Bottom Right", false],
   ];
 
   async function changeOverlayPosition(position: string) {
@@ -67,17 +67,25 @@
     <h2 class="text-lg font-normal">Overlay Position</h2>
 
     <div class="grid content-center max-w-xl grid-cols-2 gap-4 px-8">
-      {#each options as [position, label]}
+      {#each options as [position, label, available]}
         <button
-          class="w-full aspect-square col-span-1 hover:bg-cyan-700 transition text-gray-200 px-4 py-2 rounded
-          active:bg-cyan-600 active:ring-2
+          class="w-full aspect-square flex flex-col gap-2 items-center justify-center col-span-1 transition text-gray-200 px-4 py-2 rounded
           ring-cyan-400"
+          disabled={!available}
+          class:hover:cursor-not-allowed={!available}
+          class:active:bg-cyan-600={available}
+          class:active:ring-2={available}
+          class:hover:bg-cyan-700={available}
+          class:bg-cyan-950={!available}
           class:bg-cyan-800={overlayPosition === position}
           class:bg-cyan-900={overlayPosition !== position}
           class:ring-2={overlayPosition === position}
           on:click={() => (overlayPosition = position)}
         >
           {label}
+          {#if !available}
+            <span class="text-xs text-cyan-400">not available</span>
+          {/if}
         </button>
       {/each}
     </div>

frontend/src/lib/components/VoteForShip.svelte

@@ -10,7 +10,9 @@
 
   export let close: () => void;
 
-  let filteredShips: Ship[] = vote.ships.map((id) => warships[`${id}`]);
+  let filteredShips: Ship[] = vote.ships
+    .map((id) => warships[`${id}`])
+    .filter((ship) => ship !== undefined);
   let showFilters = false;
 
   let shipsByTier: Map<number, Ship[]> = new Map();
@@ -28,10 +30,12 @@
     );
   }
 
-  const votedShips = vote.ships.map((id) => ({
-    ship: warships[`${id}`] as Ship,
-    votes: vote.votes[id] || 0,
-  }));
+  const votedShips = vote.ships
+    .map((id) => ({
+      ship: warships[`${id}`] as Ship,
+      votes: vote.votes[id] || 0,
+    }))
+    .filter((vs) => vs.ship !== undefined);
 
   async function voteForShip(ship: Ship) {
     close();

frontend/src/lib/components/VoteProgressOverlay.svelte

@@ -22,7 +22,7 @@
           };
         });
     },
-    []
+    [],
   );
 </script>