Merge pull request #95 from esamarathon/feat/omnibar-current-track

Add music track to omnibar options

.gitignore

@@ -134,3 +134,4 @@ streamdeck-plugin/com.esamarathon.streamdeck.sdPlugin
 streamdeck-plugin/DistributionTool.exe
 *.psd
 /boxart/
+.idea/

schemas/omnibar.json

@@ -18,7 +18,8 @@
           "UpcomingRun",
           "Prize",
           "Bid",
-          "Milestone"
+          "Milestone",
+          "MusicTrack"
         ]
       },
       "alerts": {

src/browser_shared/replicant_store.ts

@@ -1,4 +1,4 @@
-import type { Bids, BigbuttonPlayerMap, Commentators, Countdown, CurrentRunDelay, DonationAlerts, DonationReader, DonationTotal, DonationTotalMilestones, DonationsToRead, GameLayouts, IntermissionSlides, ObsData, Omnibar, OtherStreamData, Prizes, ReaderIntroduction, ServerTimestamp, StreamDeckData, TtsVoices, UpcomingRunID, VideoPlayer } from '@esa-layouts/types/schemas';
+import type { Bids, BigbuttonPlayerMap, Commentators, Countdown, CurrentRunDelay, DonationAlerts, DonationReader, DonationTotal, DonationTotalMilestones, DonationsToRead, GameLayouts, IntermissionSlides, MusicData, ObsData, Omnibar, OtherStreamData, Prizes, ReaderIntroduction, ServerTimestamp, StreamDeckData, TtsVoices, UpcomingRunID, VideoPlayer } from '@esa-layouts/types/schemas';
 import type NodeCGTypes from '@nodecg/types';
 import clone from 'clone';
 import { SpeedcontrolUtilBrowser } from 'speedcontrol-util';
@@ -28,6 +28,7 @@ export const reps: {
   donationTotalMilestones: NodeCGTypes.ClientReplicant<DonationTotalMilestones>;
   gameLayouts: NodeCGTypes.ClientReplicant<GameLayouts>;
   intermissionSlides: NodeCGTypes.ClientReplicant<IntermissionSlides>;
+  musicData: NodeCGTypes.ClientReplicant<MusicData>;
   obsData: NodeCGTypes.ClientReplicant<ObsData>;
   omnibar: NodeCGTypes.ClientReplicant<Omnibar>;
   otherStreamData: NodeCGTypes.ClientReplicant<OtherStreamData>;
@@ -59,6 +60,7 @@ export const reps: {
   donationTotalMilestones: nodecg.Replicant('donationTotalMilestones'),
   gameLayouts: nodecg.Replicant('gameLayouts'),
   intermissionSlides: nodecg.Replicant('intermissionSlides'),
+  musicData: nodecg.Replicant('musicData'),
   obsData: nodecg.Replicant('obsData'),
   omnibar: nodecg.Replicant('omnibar'),
   otherStreamData: nodecg.Replicant('otherStreamData'),
@@ -92,6 +94,7 @@ export interface ReplicantTypes {
   donationTotalMilestones: DonationTotalMilestones;
   gameLayouts: GameLayouts;
   intermissionSlides: IntermissionSlides;
+  musicData: MusicData;
   obsData: ObsData;
   omnibar: Omnibar;
   otherStreamData: OtherStreamData;

src/dashboard/omnibar-ticker-control/components/MusicTrack.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-card class="pa-2">
+    <speed-dial :id="id" />
+    <div>
+      <span class="font-weight-bold">Type:</span>
+      Current song
+    </div>
+    <div>
+      <span class="font-weight-bold">Length:</span>
+      {{ seconds }} seconds
+    </div>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import SpeedDial from './SpeedDial.vue';
+
+@Component({
+  name: 'UpcomingRun',
+  components: {
+    SpeedDial,
+  },
+})
+export default class extends Vue {
+  @Prop({ type: String, required: true }) readonly id!: string;
+  @Prop({ type: Number, default: 25 }) readonly seconds!: number;
+}
+</script>

src/dashboard/omnibar-ticker-control/main.vue

@@ -92,6 +92,7 @@ import GenericMsg from './components/GenericMsg.vue';
 import Milestone from './components/Milestone.vue';
 import Prize from './components/Prize.vue';
 import UpcomingRun from './components/UpcomingRun.vue';
+import MusicTrack from './components/MusicTrack.vue';
 import { storeModule } from './store';
 
 @Component({
@@ -103,6 +104,7 @@ import { storeModule } from './store';
     Milestone,
     Prize,
     UpcomingRun,
+    MusicTrack,
   },
 })
 export default class OmnibarTickerControl extends Vue {
@@ -112,6 +114,10 @@ export default class OmnibarTickerControl extends Vue {
       key: 'GenericMsg',
       name: 'Generic Message',
     },
+    {
+      key: 'MusicTrack',
+      name: 'Current song',
+    },
     {
       key: 'Bid',
       name: 'Random Bid (favours sooner)',

src/graphics/omnibar/components/Ticker.vue

@@ -34,6 +34,7 @@ import UpcomingRun from './Ticker/UpcomingRun.vue';
 import Prize from './Ticker/Prize.vue';
 import Bid from './Ticker/Bid.vue';
 import Milestone from './Ticker/Milestone.vue';
+import MusicTrack from './Ticker/MusicTrack.vue';
 
 @Component({
   components: {
@@ -44,6 +45,7 @@ import Milestone from './Ticker/Milestone.vue';
     UpcomingRun,
     Prize,
     Milestone,
+    MusicTrack,
     Bid,
   },
 })

src/graphics/omnibar/components/Ticker/MusicTrack.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="Flex"
+    :style="{
+      'font-size': '33px',
+      'white-space': 'nowrap',
+      'font-weight': 500,
+      'text-align': 'center',
+      'line-height': '100%',
+    }"
+  >
+    <span>🎵 {{ trackInformation }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { replicantNS } from '@esa-layouts/browser_shared/replicant_store';
+import { wait } from '@esa-layouts/graphics/_misc/helpers';
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { MusicData } from '@esa-layouts/types/schemas';
+
+@Component({
+  name: 'MusicTrack',
+})
+export default class extends Vue {
+  @replicantNS.State((s) => s.reps.musicData) readonly musicData!: MusicData;
+  @Prop({ type: Number, default: 25 }) readonly seconds!: number;
+
+  get trackInformation(): string | undefined {
+    const info = [
+      this.musicData?.track?.title,
+      this.musicData?.track?.artist,
+    ].filter(Boolean);
+    return info.length ? info.join(' - ') : undefined;
+  }
+
+  async created(): Promise<void> {
+    // Skip display if no track is playing
+    if (!this.trackInformation) {
+      this.$emit('end');
+      return;
+    }
+
+    await wait(this.seconds * 1000); // Wait the specified length.
+    this.$emit('end');
+  }
+}
+</script>

src/types/schemas/omnibar.d.ts

@@ -7,7 +7,7 @@
 
 export interface Omnibar {
 	rotation: {
-		type: 'GenericMsg' | 'UpcomingRun' | 'Prize' | 'Bid' | 'Milestone';
+		type: 'GenericMsg' | 'UpcomingRun' | 'Prize' | 'Bid' | 'Milestone' | 'MusicTrack';
 		id: string;
 		props?: Props;
 	}[];
@@ -19,7 +19,9 @@ export interface Omnibar {
 		};
 	}[];
 	current: {
-		type: ('GenericMsg' | 'UpcomingRun' | 'Prize' | 'Bid' | 'Milestone') | ('Tweet' | 'CrowdControl' | 'MiniCredits');
+		type:
+			| ('GenericMsg' | 'UpcomingRun' | 'Prize' | 'Bid' | 'Milestone' | 'MusicTrack')
+			| ('Tweet' | 'CrowdControl' | 'MiniCredits');
 		id: string;
 		props?: Props;
 	} | null;