Add Spotify widget

Fixes https://github.com/turt2live/matrix-dimension/issues/133

package-lock.json

@@ -10855,6 +10855,11 @@
         "extend-shallow": "^3.0.0"
       }
     },
+    "spotify-uri": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/spotify-uri/-/spotify-uri-1.0.0.tgz",
+      "integrity": "sha1-5pKCizTzH04ajfIT/oeQlMfrpVU="
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",

package.json

@@ -40,6 +40,7 @@
     "require-dir-all": "^0.4.15",
     "sequelize": "^4.39.1",
     "sequelize-typescript": "^0.6.6",
+    "spotify-uri": "^1.0.0",
     "sqlite3": "^4.0.2",
     "typescript": "^2.9.2",
     "typescript-rest": "^1.7.0",

src/db/migrations/20181021164245-AddSpotifyWidget.ts

@@ -0,0 +1,23 @@
+import { QueryInterface } from "sequelize";
+
+export default {
+    up: (queryInterface: QueryInterface) => {
+        return Promise.resolve()
+            .then(() => queryInterface.bulkInsert("dimension_widgets", [
+                {
+                    type: "spotify",
+                    name: "Spotify",
+                    avatarUrl: "/img/avatars/spotify.png",
+                    isEnabled: true,
+                    isPublic: true,
+                    description: "Share music with the room",
+                }
+            ]));
+    },
+    down: (queryInterface: QueryInterface) => {
+        return Promise.resolve()
+            .then(() => queryInterface.bulkDelete("dimension_widgets", {
+                type: "spotify",
+            }));
+    }
+}

web/app/app.module.ts

@@ -99,6 +99,8 @@ import { GenericFullscreenWidgetWrapperComponent } from "./widget-wrappers/gener
 import { GrafanaWidgetConfigComponent } from "./configs/widget/grafana/grafana.widget.component";
 import { TradingViewWidgetConfigComponent } from "./configs/widget/tradingview/tradingview.widget.component";
 import { TradingViewWidgetWrapperComponent } from "./widget-wrappers/tradingview/tradingview.component";
+import { SpotifyWidgetConfigComponent } from "./configs/widget/spotify/spotify.widget.component";
+import { SpotifyWidgetWrapperComponent } from "./widget-wrappers/spotify/spotify.component";
 
 @NgModule({
     imports: [
@@ -181,6 +183,8 @@ import { TradingViewWidgetWrapperComponent } from "./widget-wrappers/tradingview
         GrafanaWidgetConfigComponent,
         TradingViewWidgetConfigComponent,
         TradingViewWidgetWrapperComponent,
+        SpotifyWidgetConfigComponent,
+        SpotifyWidgetWrapperComponent,
 
         // Vendor
     ],

web/app/app.routing.ts

@@ -37,6 +37,8 @@ import { GenericFullscreenWidgetWrapperComponent } from "./widget-wrappers/gener
 import { GrafanaWidgetConfigComponent } from "./configs/widget/grafana/grafana.widget.component";
 import { TradingViewWidgetConfigComponent } from "./configs/widget/tradingview/tradingview.widget.component";
 import { TradingViewWidgetWrapperComponent } from "./widget-wrappers/tradingview/tradingview.component";
+import { SpotifyWidgetConfigComponent } from "./configs/widget/spotify/spotify.widget.component";
+import { SpotifyWidgetWrapperComponent } from "./widget-wrappers/spotify/spotify.component";
 
 const routes: Routes = [
     {path: "", component: HomeComponent},
@@ -174,6 +176,11 @@ const routes: Routes = [
                         component: TradingViewWidgetConfigComponent,
                         data: {breadcrumb: "TradingView Widgets", name: "TradingView Widgets"},
                     },
+                    {
+                        path: "spotify",
+                        component: SpotifyWidgetConfigComponent,
+                        data: {breadcrumb: "Spotify Widgets", name: "Spotify Widgets"},
+                    },
                 ],
             },
             {
@@ -233,6 +240,7 @@ const routes: Routes = [
             {path: "stickerpicker", component: StickerPickerWidgetWrapperComponent},
             {path: "generic-fullscreen", component: GenericFullscreenWidgetWrapperComponent},
             {path: "tradingview", component: TradingViewWidgetWrapperComponent},
+            {path: "spotify", component: SpotifyWidgetWrapperComponent},
         ]
     },
 ];

web/app/configs/widget/spotify/spotify.widget.component.html

@@ -0,0 +1,12 @@
+<my-widget-config [widgetComponent]="this">
+    <ng-template #widgetParamsTemplate let-widget="widget">
+        <label class="label-block">
+            Spotify URI
+            <span class="text-muted">Click "share" from your favourite playlist, artist, track, or album and paste the Spotify URI here.</span>
+            <input type="text" class="form-control"
+                   placeholder="spotify:artist:7CajNmpbOovFoOoasH2HaY"
+                   [(ngModel)]="widget.dimension.newData.uri" name="widget-uri-{{widget.id}}"
+                   [disabled]="isUpdating"/>
+        </label>
+    </ng-template>
+</my-widget-config>

web/app/configs/widget/spotify/spotify.widget.component.ts

@@ -0,0 +1,30 @@
+import { DISABLE_AUTOMATIC_WRAPPING, WidgetComponent } from "../widget.component";
+import { EditableWidget, WIDGET_SPOTIFY } from "../../../shared/models/widget";
+import { Component } from "@angular/core";
+
+@Component({
+    templateUrl: "spotify.widget.component.html",
+    styleUrls: ["spotify.widget.component.scss"],
+})
+export class SpotifyWidgetConfigComponent extends WidgetComponent {
+
+    constructor() {
+        super(WIDGET_SPOTIFY, "Spotify", DISABLE_AUTOMATIC_WRAPPING, "spotify");
+    }
+
+    protected OnNewWidgetPrepared(widget: EditableWidget): void {
+        widget.dimension.newData.uri = "";
+    }
+
+    protected OnWidgetBeforeAdd(widget: EditableWidget): void {
+        this.setSpotifyUrl(widget);
+    }
+
+    protected OnWidgetBeforeEdit(widget: EditableWidget) {
+        this.setSpotifyUrl(widget);
+    }
+
+    private setSpotifyUrl(widget: EditableWidget) {
+        widget.dimension.newUrl = window.location.origin + "/widgets/spotify?uri=$uri";
+    }
+}

web/app/home/home.component.html

@@ -43,6 +43,10 @@
                     <img src="/img/avatars/tradingview.png">
                     <span>TradingView</span>
                 </div>
+                <div class="integration">
+                    <img src="/img/avatars/spotify.png">
+                    <span>Spotify</span>
+                </div>
                 <div class="integration">
                     <img src="/img/avatars/youtube.png">
                     <span>YouTube</span>

web/app/shared/models/widget.ts

@@ -10,6 +10,7 @@ export const WIDGET_GRAFANA = ["grafana", "dimension-grafana"];
 export const WIDGET_TWITCH = ["twitch", "dimension-twitch"];
 export const WIDGET_STICKER_PICKER = ["m.stickerpicker"];
 export const WIDGET_TRADINGVIEW = ["tradingview", "dimension-tradingview"];
+export const WIDGET_SPOTIFY = ["spotify", "dimension-spotify"];
 
 export interface EditableWidget {
     /**

web/app/shared/registry/integrations.registry.ts

@@ -5,7 +5,7 @@ import {
     WIDGET_GOOGLE_CALENDAR,
     WIDGET_GOOGLE_DOCS,
     WIDGET_GRAFANA,
-    WIDGET_JITSI,
+    WIDGET_JITSI, WIDGET_SPOTIFY,
     WIDGET_TRADINGVIEW,
     WIDGET_TWITCH,
     WIDGET_YOUTUBE
@@ -56,6 +56,9 @@ export class IntegrationsRegistry {
             "tradingview": {
                 types: WIDGET_TRADINGVIEW,
             },
+            "spotify": {
+                types: WIDGET_SPOTIFY,
+            },
         },
     };
 

web/app/widget-wrappers/spotify/spotify.component.ts

@@ -0,0 +1,22 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import * as spotifyUri from "spotify-uri";
+import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
+
+@Component({
+    selector: "my-spotify-widget-wrapper",
+    templateUrl: "../fullpage-iframe/fullpage-iframe.component.html",
+    styleUrls: ["../fullpage-iframe/fullpage-iframe.component.scss"],
+})
+export class SpotifyWidgetWrapperComponent {
+
+    public embedUrl: SafeUrl = null;
+
+    constructor(activatedRoute: ActivatedRoute, sanitizer: DomSanitizer) {
+        let params: any = activatedRoute.snapshot.queryParams;
+        const spotifyUrl = spotifyUri.parse(params.uri);
+        const spotifyEmbedUrl = spotifyUri.formatEmbedURL(spotifyUrl);
+        this.embedUrl = sanitizer.bypassSecurityTrustResourceUrl(spotifyEmbedUrl);
+    }
+
+}