matrix-dimension/web/app/configs/widget/youtube/youtube.widget.component.ts

import { WidgetComponent } from "../widget.component";
import { EditableWidget, WIDGET_YOUTUBE } from "../../../shared/models/widget";
import { Component } from "@angular/core";
import * as embed from "embed-video";
import * as $ from "jquery";
import * as url from "url";

@Component({
    templateUrl: "youtube.widget.component.html",
    styleUrls: ["youtube.widget.component.scss"],
})
export class YoutubeWidgetConfigComponent extends WidgetComponent {
    constructor() {
        super(WIDGET_YOUTUBE, "Video", "video", "youtube");
    }

    protected OnNewWidgetPrepared(widget: EditableWidget) {
        widget.dimension.newData.videoUrl = "";
    }

    protected OnWidgetsDiscovered(widgets: EditableWidget[]) {
        for (const widget of widgets) {
            if (widget.data.videoUrl) continue; // Dimension widget

            if (widget.data.cUrl) {
                // Scalar widget
                widget.data.videoUrl = this.parseVideoUrl(widget.data.cUrl);
            } else {
                // Older Dimension widget - infer link
                const parsedUrl = url.parse(widget.url, true);
                if (parsedUrl.query["url"]) {
                    widget.data.videoUrl = this.parseVideoUrl(decodeURIComponent(parsedUrl.query["url"]));
                } else console.warn("Cannot parse URL for " + widget.id);
            }
        }
    }

    protected OnWidgetBeforeAdd(widget: EditableWidget) {
        this.setVideoUrl(widget);
    }

    protected OnWidgetBeforeEdit(widget: EditableWidget) {
        this.setVideoUrl(widget);
    }

    private setVideoUrl(widget: EditableWidget) {
        if (!widget.dimension.newData.videoUrl || widget.dimension.newData.videoUrl.trim().length === 0) {
            throw new Error("Please enter a video URL");
        }

        const videoUrl = this.getRealVideoUrl(widget.dimension.newData.videoUrl);
        if (!videoUrl) {
            throw new Error("Please enter a YouTube, Vimeo, or DailyMotion video URL");
        }

        widget.dimension.newUrl = videoUrl;
    }

    private getRealVideoUrl(videoUrl): string {
        const embedCode = embed(videoUrl);
        if (!embedCode) {
            return null;
        }

        // HACK: Grab the video URL from the iframe embed code
        videoUrl = $(embedCode).attr("src");
        if (videoUrl.startsWith("//")) videoUrl = "https:" + videoUrl;

        return videoUrl;
    }

    private parseVideoUrl(videoUrl: string): string {
        const parsed = url.parse(videoUrl);

        const realPath = parsed.path.split("?")[0];
        if (parsed.host.indexOf("youtube.com") !== -1) {
            return "https://youtube.com/watch?v=" + realPath.substring("/embed/".length);
        } else if (parsed.host.indexOf("vimeo.com") !== -1) {
            return "https://vimeo.com/" + realPath.substring("/video/".length);
        } else if (parsed.host.indexOf("dailymotion.com") !== -1) {
            return "https://dailymotion.com/" + realPath.substring("/embed/".length);
        }

        return videoUrl;
    }
}