Completed stable 2.0

src/render/App.svelte

@@ -27,6 +27,8 @@
   import ErrorNotificationBar from "./components/ErrorNotificationBar.svelte";
   import { downloads, numberOfDownloads } from "./stores/downloads.store";
   import { themeStore } from "./stores/theme.store";
+  import Dialog from "./components/Dialog.svelte";
+  import VideoPreviewDialog from "./components/VideoPreviewDialog.svelte";
 </script>
 
 <div class="app-container">
@@ -98,15 +100,15 @@
       {#if $activeView === NEW_MAPS}
         <NewSongs />
       {/if}
-      {#if $activeView === HOT_MAPS}
+      <!-- {#if $activeView === HOT_MAPS}
         <HotSongs />
-      {/if}
+      {/if} -->
       {#if $activeView === TOP_RATED_MAPS}
         <TopRatedSongs />
       {/if}
-      {#if $activeView === TOP_DOWNLOADED_MAPS}
+      <!-- {#if $activeView === TOP_DOWNLOADED_MAPS}
         <TopDownloadedSongs />
-      {/if}
+      {/if} -->
       {#if $activeView === SEARCH}
         <Search />
       {/if}
@@ -129,6 +131,8 @@
 
 <Toast />
 
+<VideoPreviewDialog />
+
 <svelte:head>
   <link rel="stylesheet" href={$themeStore.currentThemeCss} />
 </svelte:head>

src/render/components/BeatmapListItem.svelte

@@ -1,22 +1,17 @@
 <script>
-  import { download, play, stop } from "svelte-awesome/icons";
+  import { download, play, stop, eye } from "svelte-awesome/icons";
   import { createEventDispatcher } from "svelte";
   import LoadingSpinner from "./LoadingSpinner.svelte";
   import BeatmapStats from "./BeatmapStats.svelte";
   import Fab from "./Fab.svelte";
   import PrimaryText from "./PrimaryText.svelte";
   import SecondaryText from "./SecondaryText.svelte";
-  import NormalChip from "./NormalChip.svelte";
-  import EasyChip from "./EasyChip.svelte";
-  import HardChip from "./HardChip.svelte";
-  import ExpertChip from "./ExpertChip.svelte";
-  import ExpertPlusChip from "./ExpertPlusChip.svelte";
-  import ModeChip from "./ModeChip.svelte";
   import ListDivider from "./ListDivider.svelte";
 
   import { beatmapPreviewStore, activeBeatmapPreviewKey, beatmapToPreviewKey } from "../stores/beatmap-preview.store";
 
   import { downloads } from "../stores/downloads.store";
+  import CharacteristicChip from "./CharacteristicChip.svelte";
 
   export let beatmap;
 
@@ -37,6 +32,10 @@
   function handleStopClick() {
     dispatch("stop", beatmap);
   }
+
+  function handleVideoPreviewClick() {
+    dispatch("videoPreview", beatmap);
+  }
 </script>
 
 <div class="beatmap-list-item">
@@ -61,38 +60,32 @@
 
     <div class="beatmap-difficulties">
       {#each beatmap.versions[0].diffs as mapDifficultyInfo}
-        {#if mapDifficultyInfo.difficulty === "Easy"}
-          <EasyChip />
-        {/if}
-        {#if mapDifficultyInfo.difficulty === "Normal"}
-          <NormalChip />
-        {/if}
-        {#if mapDifficultyInfo.difficulty === "Hard"}
-          <HardChip />
-        {/if}
-        {#if mapDifficultyInfo.difficulty === "Expert"}
-          <ExpertChip />
-        {/if}
-        {#if mapDifficultyInfo.difficulty === "ExpertPlus"}
-          <ExpertPlusChip />
-        {/if}
+        <div>
+          <CharacteristicChip difficulty={mapDifficultyInfo.difficulty} characteristic={mapDifficultyInfo.characteristic} />
+        </div>
       {/each}
     </div>
-
-    <!-- <div class="beatmap-modes">
-      {#each beatmap.metadata.characteristics as characteristic}
-        <ModeChip>{characteristic.name}</ModeChip>
-      {/each}
-    </div> -->
   </div>
 
   <div class="beatmap-meta">
     <BeatmapStats {beatmap} />
 
     <div class="beatmap-audio-controls">
+      <div>
+        <Fab
+          on:click={handleVideoPreviewClick}
+          scale={6}
+          iconColor="white"
+          color="var(--beatmapUpvotesIconColor)"
+          iconData={eye}
+          iconScale={1.5}
+        />
+      </div>
       <div>
         {#if isCurrentlyLoading}
-          <LoadingSpinner />
+          <div class="spinner-wrapper">
+            <LoadingSpinner />
+          </div>
         {:else if !isCurrentlyPlaying}
           <Fab on:click={handlePreviewClick} scale={6} iconColor="white" color="var(--primary)" iconData={play} iconScale={1.5} />
         {:else}
@@ -101,7 +94,9 @@
       </div>
       <div>
         {#if isCurrentlyDownloading}
-          <LoadingSpinner />
+          <div class="spinner-wrapper">
+            <LoadingSpinner />
+          </div>
         {:else}
           <Fab on:click={handleDownloadClick} scale={6} iconColor="white" color="var(--secondary)" iconData={download} iconScale={1.5} />
         {/if}
@@ -112,6 +107,13 @@
 <ListDivider />
 
 <style type="text/scss">
+  .spinner-wrapper {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .beatmap-list-item {
     height: var(--beatmapListItemCoverImgSize);
     max-height: var(--beatmapListItemCoverImgSize);
@@ -146,29 +148,29 @@
       }
     }
 
+    .beatmap-difficulties {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      & > *:not(:last-child) {
+        margin-right: 4px;
+      }
+    }
+
     .beatmap-meta {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      width: 104px;
+      flex-grow: 0.033;
 
       .beatmap-audio-controls {
         width: 100%;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
-
-        // div {
-        //   margin-left: 8px;
-        //   flex-shrink: 0;
-        //   flex-grow: 0;
-        // }
       }
     }
   }
-
-  .beatmap-modes * {
-    margin-right: 8px;
-  }
 </style>

src/render/components/CharacteristicChip.svelte

@@ -0,0 +1,42 @@
+<script>
+  import { tooltip } from "../actions/tooltip";
+
+  export let characteristic;
+  export let difficulty;
+  const bgColorMap = {
+    Easy: "--easyChipBackgroundColor",
+    Normal: "--normalChipBackgroundColor",
+    Hard: "--hardChipBackgroundColor",
+    Expert: "--expertChipBackgroundColor",
+    ExpertPlus: "--expertPlusChipBackgroundColor",
+  };
+
+  const iconMap = {
+    Standard: "icons/standard.svg",
+    OneSaber: "icons/onesaber.svg",
+    NoArrows: "icons/noarrows.svg",
+    "90Degree": "icons/90degree.svg",
+    "360Degree": "icons/360degree.svg",
+    Lightshow: "icons/lightshow.svg",
+    Lawless: "icons/lawless.svg",
+  };
+
+  $: bgColor = bgColorMap[difficulty];
+  $: icon = iconMap[characteristic];
+</script>
+
+<span use:tooltip={{ text: `${difficulty} ${characteristic}` }} class="chip" style="--chipBackgroundColor:var({bgColor})">
+  <img src={icon} width="24px" alt="Song Characteristic: {difficulty} {characteristic}" />
+</span>
+
+<style>
+  .chip {
+    color: white;
+    background-color: var(--chipBackgroundColor);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 8px 2px 8px;
+  }
+</style>