Update detailed match to include match thumbnails

slmnio · Jan 7, 2023 · 4095acc · 4095acc
1 parent dca1376
commit 4095acc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/website/src/components/website/match/DetailedMatchStat.vue b/website/src/components/website/match/DetailedMatchStat.vue
@@ -2,14 +2,17 @@
     <div class="stat mb-2" v-if="shouldShow">
         <div class="stat-a"><slot></slot></div>
         <div class="stat-b" v-if="raw" v-html="formattedTargetData"></div>
+        <div class="" v-if="$slots.content">
+            <slot name="content"></slot>
+        </div>
         <div class="stat-b" v-else-if="time">{{ prettyDate(targetData) }}</div>
         <div class="stat-b" v-else-if="players">
             <LinkedPlayers :players="targetData" :show-tally="showTally" />
         </div>
         <div class="stat-b" v-else-if="externalLink">
             <a class="ct-active" :href="targetData" target="_blank">{{ targetData.replace('https://', '') }}</a>
         </div>
-        <div class="stat-b" v-else>{{ formattedTargetData }}</div>
+        <div class="stat-b" v-else-if="formattedTargetData">{{ formattedTargetData }}</div>
     </div>
 </template>
 
@@ -31,7 +34,7 @@ export default {
             return this.override || this.match[this.data];
         },
         shouldShow() {
-            return this.targetData && this.targetData?.length !== 0;
+            return this.$slots.content || (this.targetData && this.targetData?.length !== 0);
         },
         formattedTargetData() {
             return this.format ? this.format(this.targetData) : this.targetData;

diff --git a/website/src/views/DetailedMatch.vue b/website/src/views/DetailedMatch.vue
@@ -154,6 +154,13 @@
                         {{ relGroup.items.length === 1 ? relGroup.meta.singular_name : relGroup.meta.plural_name }}
                     </stat>
                     <stat :match="match" data="replay_codes" :raw="true" :format="(t) => t[0].replace(/\n/g, '<br>')">Replay codes</stat>
+                    <stat :match="match">
+                        Match Thumbnails
+                        <template v-slot:content class="d-inline">
+                            <a :href="matchThumbnailURL(match, 720)"  rel="nofollow" target="_blank">720p</a>,
+                            <a :href="matchThumbnailURL(match, 1080)"  rel="nofollow" target="_blank">1080p</a>
+                        </template>
+                    </stat>
                 </div>
             </div>
         </div>
@@ -172,6 +179,7 @@ import Markdown from "@/components/website/Markdown";
 import { resizedImage, resizedImageNoWrap } from "@/utils/images";
 import CopyTextButton from "@/components/website/CopyTextButton";
 import BracketImplications from "@/components/website/dashboard/BracketImplications.vue";
+import { getDataServerAddress } from "@/utils/fetch";
 
 export default {
     name: "DetailedMatch",
@@ -230,6 +238,10 @@ export default {
         },
         showLimitedPlayers(team) {
             return ((team.players || [])?.length === 0) && (team.limited_players || []).length !== 0;
+        },
+        matchThumbnailURL(match, size) {
+            const dataServerURL = getDataServerAddress();
+            return `${dataServerURL}/match.png?id=${match.id}&size=${size || "720"}&padding=30`;
         }
     },
     computed: {