Add user reactive DDR BG vids

src/components/Cards/GameHeader.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import {
   PhHouse,
@@ -11,7 +11,11 @@ import {
 } from "@phosphor-icons/vue";
 import BaseButton from "@/components/BaseButton.vue";
 import GameTitleLine from "@/components/GameTitleLine.vue";
-import { getVideoSource, getCardStyle } from "@/constants/sources";
+import {
+  getCardStyle,
+  getVideoSource,
+  getCustomizeVideoSource,
+} from "@/constants/sources";
 
 import { useMainStore } from "@/stores/main";
 const mainStore = useMainStore();
@@ -33,6 +37,10 @@ const props = defineProps({
     type: Number,
     default: null,
   },
+  customFileId: {
+    type: Number,
+    default: null,
+  },
 });
 
 function loadRoutes() {
@@ -112,6 +120,19 @@ function loadRoutes() {
 
   return navigationData;
 }
+
+const videoSource = computed(() => {
+  if (props.customFileId != null) {
+    return getCustomizeVideoSource(
+      props.game,
+      props.version,
+      "background",
+      props.customFileId,
+    );
+  }
+
+  return getVideoSource(props.game, props.version);
+});
 </script>
 
 <template>
@@ -125,7 +146,7 @@ function loadRoutes() {
       muted
       loop
       playsinline
-      :src="getVideoSource(game, version)"
+      :src="videoSource"
       class="background-video"
     ></video>
     <div class="bg-white dark:bg-slate-900/90 rounded-2xl card-content">

src/constants/sources.js

@@ -16,6 +16,15 @@ export function getVideoSource(game, version) {
   }
 }
 
+export function getCustomizeVideoSource(game, version, type, file) {
+  if (version && game.videoTable?.includes(version)) {
+    const ASSET_PATH = import.meta.env.VITE_GAME_ASSET_PATH;
+    return `${ASSET_PATH}/customizations/${game.id}/${version}/${type}/${file}.mp4`;
+  } else {
+    return null;
+  }
+}
+
 export function getCardStyle(game, version) {
   if (game.videoTable?.includes(version)) {
     return null;

src/views/Game/EditView.vue

@@ -125,7 +125,13 @@ async function updateProfile() {
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <GameHeader :game="thisGame" :version="versionForm.currentVersion">
+      <GameHeader
+        :game="thisGame"
+        :version="versionForm.currentVersion"
+        :custom-file-id="
+          myProfile?.customize ? myProfile?.customize['3_1'] : null
+        "
+      >
         <div
           v-if="thisGame.versions && myProfile"
           class="w-full md:flex md:-mt-18.75 mb-4 place-content-end"

src/views/Game/GameView.vue

@@ -304,7 +304,13 @@ function formatHitchart(data) {
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <GameHeader :game="thisGame" :version="versionForm.currentVersion">
+      <GameHeader
+        :game="thisGame"
+        :version="versionForm.currentVersion"
+        :custom-file-id="
+          myProfile?.customize ? myProfile?.customize['3_1'] : null
+        "
+      >
         <div
           v-if="thisGame.versions && myProfile"
           class="w-full md:flex md:-mt-18.75 mb-4 place-content-end"

src/views/Game/PlayerView.vue

@@ -35,7 +35,11 @@ import { getIIDXDan } from "@/constants/danClass.js";
 import { getGitadoraColor, getJubilityColor } from "@/constants/skillColor";
 import { formatSortableDate } from "@/constants/date";
 import { getFlareLevel } from "@/helpers/flare";
-const ASSET_PATH = import.meta.env.VITE_ASSET_PATH;
+import {
+  getCardStyle,
+  getVideoSource,
+  getCustomizeVideoSource,
+} from "@/constants/sources";
 
 const mainStore = useMainStore();
 const $route = useRoute();
@@ -184,38 +188,6 @@ var loadStats = [
   },
 ];
 
-function getSources() {
-  if (!versionForm.currentVersion) {
-    return thisGame.cardBG;
-  } else {
-    return `${ASSET_PATH}/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
-  }
-}
-
-function getVideoSource() {
-  if (
-    versionForm.currentVersion &&
-    thisGame.videoTable?.includes(versionForm.currentVersion)
-  ) {
-    const ASSET_PATH = import.meta.env.VITE_GAME_ASSET_PATH;
-    return `${ASSET_PATH}/video/${thisGame.id}/${versionForm.currentVersion}.mp4`;
-  } else {
-    return null;
-  }
-}
-
-function getCardStyle() {
-  if (thisGame.videoTable?.includes(versionForm.currentVersion)) {
-    return null;
-  } else {
-    return `
-      background-image: url('${getSources()}');
-      background-size: cover;
-      background-repeat: no-repeat;
-    `;
-  }
-}
-
 function colorText(stat, profile) {
   if (profile) {
     if (stat.isSkill && profile.jubility) {
@@ -445,6 +417,21 @@ const groupedTimeline = computed(() => {
 
   return groups.reverse();
 });
+
+const videoSource = computed(() => {
+  const custom = myProfile.value?.customize?.["3_1"] ?? null;
+
+  if (custom != null) {
+    return getCustomizeVideoSource(
+      thisGame,
+      versionForm.currentVersion,
+      "background",
+      custom,
+    );
+  }
+
+  return getVideoSource(thisGame, versionForm.currentVersion);
+});
 </script>
 
 <template>
@@ -468,7 +455,7 @@ const groupedTimeline = computed(() => {
         </SectionTitleLine>
         <div
           v-if="versionForm.currentVersion && myProfile"
-          :style="getCardStyle()"
+          :style="getCardStyle(thisGame, versionForm.currentVersion)"
           class="rounded-2xl mb-6 card-container"
         >
           <video
@@ -476,7 +463,7 @@ const groupedTimeline = computed(() => {
             muted
             loop
             playsinline
-            :src="getVideoSource()"
+            :src="videoSource"
             class="background-video"
           ></video>
           <div
@@ -490,12 +477,12 @@ const groupedTimeline = computed(() => {
               >
                 <div
                   v-if="!thisGame.noScores"
-                  class="md:w-1/3 grid grid-cols-1 md:grid-cols-2 gap-3 mt-4"
+                  class="md:w-1/3 grid grid-cols-1 md:grid-cols-3 gap-3 mt-4"
                 >
                   <template v-if="mainStore?.userAdmin">
                     <BaseButton
                       :to="`/profiles/${myProfile.userId}`"
-                      :icon="PhMedal"
+                      :icon="PhUser"
                       class="w-full md:w-auto"
                       color="success"
                       label="User Profile"

src/views/Game/RivalsView.vue

@@ -325,7 +325,13 @@ const navigateToProfile = (userID) => {
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <GameHeader :game="thisGame" :version="versionForm.currentVersion">
+      <GameHeader
+        :game="thisGame"
+        :version="versionForm.currentVersion"
+        :custom-file-id="
+          myProfile?.customize ? myProfile?.customize['3_1'] : null
+        "
+      >
         <div
           v-if="thisGame.versions && myProfile"
           class="w-full md:flex md:-mt-18.75 mb-4 place-content-end"