Merge pull request #274 from OneNoteDev/bug/fix-duplicate-videos-on-selection-clip

Rework video extraction logic

Author: leakymemory

src/scripts/domParsers/domUtils.ts

@@ -361,7 +361,7 @@ export module DomUtils {
 			// If we are on a Domain that has a valid VideoExtractor, get the embedded videos
 			// to render them later
 			if (extractor) {
-				iframes = iframes.concat(extractor.createEmbeddedVideos(pageUrl, pageContent));
+				iframes = iframes.concat(extractor.createEmbeddedVideosFromPage(pageUrl, pageContent));
 			}
 		} catch (e) {
 			// if we end up here, we're unexpectedly broken
@@ -941,11 +941,7 @@ export module DomUtils {
 
 			let domain = VideoUtils.SupportedVideoDomains[supportedDomain];
 			let extractor = VideoExtractorFactory.createVideoExtractor(domain);
-			let embeddedVideos = extractor.createEmbeddedVideos(src, doc.body.innerHTML);
-			if (embeddedVideos && embeddedVideos.length > 0) {
-				return embeddedVideos[0];
-			}
-			return undefined;
+			return extractor.createEmbeddedVideoFromUrl(src);
 		});
 	}
 
@@ -972,8 +968,6 @@ export module DomUtils {
 
 		let scrollValue: number = (elem.scrollTop * 1.0) / (elem.scrollHeight - elem.clientHeight);
 
-		// console.warn(elem.scrollTop, elem.scrollHeight, elem.clientHeight, scrollValue);
-
 		if (asDecimalValue) {
 			return scrollValue;
 		}

src/scripts/domParsers/khanAcademyVideoExtractor.ts

@@ -4,48 +4,43 @@ import {YoutubeVideoExtractor} from "./youtubeVideoExtractor";
 
 import {ObjectUtils} from "../objectUtils";
 
-export class KhanAcademyVideoExtractor implements VideoExtractor {
+export class KhanAcademyVideoExtractor extends VideoExtractor {
 	private youtubeExtractor: YoutubeVideoExtractor;
 
 	constructor() {
+		super();
+		// KhanAcademy hosts their videos on Youtube
 		this.youtubeExtractor = new YoutubeVideoExtractor();
 	}
 
-	public getVideoIds(pageUrl: string, pageContent: string): string[] {
+	public createEmbeddedVideosFromHtml(html: string): HTMLIFrameElement[] {
+		if (!html) {
+			return [];
+		}
+
 		// Matches strings of the form id="video_\S+" OR id='video_\S+'
 		// with any amount of whitespace padding in between strings of interest
-		let regex1 = /id\s*=\s*("\s*video_(\S+)\s*"|'\s*video_(\S+)\s*')/gi;
+		let regex1 = /\sid\s*=\s*("\s*video_(\S+)\s*"|'\s*video_(\S+)\s*')/gi;
 
 		// Matches strings of the form data-youtubeid="\S+" OR data-youtubeid='\S+'
 		// with any amount of whitespace padding in between strings of interest
-		let regex2 = /data-youtubeid\s*=\s*("\s*(\S+)\s*"|'\s*(\S+)\s*')/gi;
+		let regex2 = /data-youtubeid\s*=\s*("\s*video_(\S+)\s*"|'\s*video_(\S+)\s*')/gi;
 
-		return VideoUtils.matchRegexFromPageContent(pageContent, [regex1, regex2]);
-	}
-
-	public getVideoSrcValues(pageUrl: string, pageContent: string): string[] {
-		if (ObjectUtils.isNullOrUndefined(pageContent)) {
-			return;
-		}
-
-		let videoIds = this.getVideoIds(pageUrl, pageContent);
-		if (ObjectUtils.isNullOrUndefined(videoIds) || videoIds.length === 0) {
-			return;
+		let ids = VideoUtils.matchRegexFromPageContent(html, [regex1, regex2]);
+		if (!ids) {
+			return [];
 		}
 
-		return ["https://www.youtube.com/embed/" + videoIds[0]];
+		return ids.map((id) => this.createEmbeddedVideoFromId(id));
 	}
 
-	/**
-	 * Create iframe in correct format for KhanAcademy video (hosted on YouTube) embed in OneNote.
-	 */
-	public createEmbeddedVideos(pageUrl: string, pageContent: string): HTMLIFrameElement[] {
-		let youtubeSrcFromKhanAcademyPage = this.getVideoSrcValues(pageUrl, pageContent);
-		if (youtubeSrcFromKhanAcademyPage.length === 0) {
-			return [];
-		}
-		let firstSource = youtubeSrcFromKhanAcademyPage[0];
-		return this.youtubeExtractor.createEmbeddedVideos(firstSource, pageContent);
+	public createEmbeddedVideoFromUrl(url: string): HTMLIFrameElement {
+		// KhanAcademy does not host their own videos. We can only derive videos
+		// from their page's html.
+		return undefined;
 	}
 
+	public createEmbeddedVideoFromId(id: string): HTMLIFrameElement {
+		return this.youtubeExtractor.createEmbeddedVideoFromId(id);
+	}
 }

src/scripts/domParsers/videoExtractor.ts

@@ -1,8 +1,40 @@
-export interface VideoExtractor {
-	getVideoIds(pageUrl: string, pageContent: string): string[];
+import * as _ from "lodash";
 
-	// We can use the video IDs to generate or retrieve src values that we can embed into our article preview
-	getVideoSrcValues(pageUrl: string, pageContent: string): string[];
+export abstract class VideoExtractor {
+	/**
+	 * Given a page's url and its body html, return a unique list of
+	 * OneNoteApi-compliant video embeds. If there's a video associated
+	 * with the page url, it will be first in the list.
+	 */
+	public createEmbeddedVideosFromPage(url: string, html: string): HTMLIFrameElement[] {
+		let allVideoEmbeds: HTMLIFrameElement[] = [];
+		let videoEmbedFromUrl = this.createEmbeddedVideoFromUrl(url);
+		if (videoEmbedFromUrl) {
+			allVideoEmbeds.push(videoEmbedFromUrl);
+		}
 
-	createEmbeddedVideos(pageUrl: string, pageContent: string): HTMLIFrameElement[];
+		allVideoEmbeds = allVideoEmbeds.concat(this.createEmbeddedVideosFromHtml(html));
+		return _.uniqWith(allVideoEmbeds, (v1: HTMLIFrameElement, v2: HTMLIFrameElement) => {
+			return v1.src === v2.src;
+		});
+	}
+
+	/**
+	 * Given some arbitrary html with n embedded videos that the
+	 * extractor recognizes, return a list of n OneNoteApi-compliant
+	 * video embeds.
+	 */
+	public abstract createEmbeddedVideosFromHtml(html: string): HTMLIFrameElement[];
+
+	/**
+	 * Given the url of a video page belonging to the extractor's domain, or
+	 * an extisting embedded element, return a OneNoteApi-compliant video
+	 * embed.
+	 */
+	public abstract createEmbeddedVideoFromUrl(url: string): HTMLIFrameElement;
+
+	/**
+	 * Given the id of the video, return a OneNoteApi-compliant video embed.
+	 */
+	public abstract createEmbeddedVideoFromId(id: string): HTMLIFrameElement;
 };

src/scripts/domParsers/videoUtils.ts

@@ -1,10 +1,6 @@
 import {ObjectUtils} from "../objectUtils";
-
 import {UrlUtils} from "../urlUtils";
 
-import {VideoExtractor} from "./VideoExtractor";
-import {KhanAcademyVideoExtractor} from "./khanAcademyVideoExtractor";
-
 export module VideoUtils {
 	export const youTubeWatchVideoBaseUrl = "https://www.youtube.com/watch";
 	export const youTubeVideoIdQueryKey = "v";
@@ -63,6 +59,9 @@ export module VideoUtils {
 		if (matches.length === 0) {
 			return;
 		}
-		return matches.filter((element, index, array) => { return array.indexOf(element) === index; }); // unique values only
+
+		// We used to return unique values, but since we now support videos in selections, we moved the
+		// uniqueness logic to VideoExtractor::createEmbeddedVideosFromPage
+		return matches;
 	}
 }

src/scripts/domParsers/vimeoVideoExtractor.ts

@@ -4,73 +4,59 @@ import {VideoUtils} from "./videoUtils";
 
 import {ObjectUtils} from "../objectUtils";
 
-export class VimeoVideoExtractor implements VideoExtractor {
+export class VimeoVideoExtractor extends VideoExtractor {
 	private dataOriginalSrcAttribute = "data-original-src";
 
-	/**
-	 * Return id for a video on Vimeo.com
-	 */
-	public getVideoIds(pageUrl: string, pageContent: string): string[] {
-		if (ObjectUtils.isNullOrUndefined(pageContent)) {
-			return;
+	public createEmbeddedVideosFromHtml(html: string): HTMLIFrameElement[] {
+		if (!html) {
+			return [];
 		}
 
-		// looking for all matches in pageContent of the general format: id="clip_###"
-		// 		- where ### could be any number of digits
-		// 		- ignore casing
-		// 		- ignore possible whitespacing variations between characters
-		// 		- accept the use of either double- or single-quotes around clip_###
+		// Looking for all matches in pageContent of the general format: id="clip_###"
+		// - where ### could be any number of digits
+		// - ignore casing
+		// - ignore possible whitespacing variations between characters
+		// - accept the use of either double- or single-quotes around clip_###
 		let regex1 = /id\s*=\s*("\s*clip_(\d+)\s*"|'\s*clip_(\d+)\s*')/gi;
 
-		// also account for embedded Vimeo videos
+		// Also account for embedded Vimeo videos
 		let regex2 = /player\.vimeo\.com\/video\/((\d+))\d{0}/gi;
 
-		return VideoUtils.matchRegexFromPageContent(pageContent, [regex1, regex2]);
+		let ids = VideoUtils.matchRegexFromPageContent(html, [regex1, regex2]);
+		if (!ids) {
+			return [];
+		}
+
+		return ids.map((id) => this.createEmbeddedVideoFromId(id));
 	}
 
-	/**
-	 * Return valid iframe src attribute value for the supported Vimeo domain
-	 */
-	public getVideoSrcValues(pageUrl: string, pageContent: string): string[] {
-		if (ObjectUtils.isNullOrUndefined(pageContent)) {
-			return;
+	public createEmbeddedVideoFromUrl(url: string): HTMLIFrameElement {
+		if (!url) {
+			return undefined;
 		}
 
-		let vimeoIds = this.getVideoIds(pageUrl, pageContent);
-		if (ObjectUtils.isNullOrUndefined(vimeoIds)) {
-			return;
+		let match = url.match(/^https?:\/\/vimeo\.com\/(\d+)\d{0}/);
+		if (match) {
+			return this.createEmbeddedVideoFromId(match[1]);
 		}
 
-		let values = [];
-		for (let id of vimeoIds) {
-			values.push("https://player.vimeo.com/video/" + id);
+		match = url.match(/^https?:\/\/player.vimeo.com\/video\/(\d+)\d{0}/);
+		if (match) {
+			return this.createEmbeddedVideoFromId(match[1]);
 		}
 
-		return values;
+		return undefined;
 	}
 
-	/**
-	 * Create iframes in correct format for Vimeo video embed in OneNote.
-	 * Supports multiple videos.
-	 */
-	public createEmbeddedVideos(pageUrl: string, pageContent: string): HTMLIFrameElement[] {
-		let vimeoSrcs = this.getVideoSrcValues(pageUrl, pageContent);
-
-		if (ObjectUtils.isNullOrUndefined(vimeoSrcs)) {
-			// fast fail: we expect all pages passed into this function in prod to contain clip ids
-			throw new Error("Vimeo page content does not contain clip ids");
-		}
-
-		let iframes: HTMLIFrameElement[] = [];
-
-		for (let vimeoSrc of vimeoSrcs) {
-			let iframe = DomUtils.createEmbedVideoIframe();
-			iframe.src = vimeoSrc;
-			iframe.setAttribute(this.dataOriginalSrcAttribute, vimeoSrc);
-
-			iframes.push(iframe);
+	public createEmbeddedVideoFromId(id: string): HTMLIFrameElement {
+		if (!id) {
+			return undefined;
 		}
 
-		return iframes;
+		let videoEmbed = DomUtils.createEmbedVideoIframe();
+		let src = "https://player.vimeo.com/video/" + id;
+		videoEmbed.src = src;
+		videoEmbed.setAttribute(this.dataOriginalSrcAttribute, src);
+		return videoEmbed;
 	}
 }

src/scripts/domParsers/youtubeVideoExtractor.ts

@@ -4,74 +4,63 @@ import {VideoExtractor} from "./videoExtractor";
 import {ObjectUtils} from "../objectUtils";
 import {UrlUtils} from "../urlUtils";
 
-export class YoutubeVideoExtractor implements VideoExtractor {
+export class YoutubeVideoExtractor extends VideoExtractor {
 	private youTubeWatchVideoBaseUrl = "https://www.youtube.com/watch";
 	private youTubeVideoIdQueryKey = "v";
 	private dataOriginalSrcAttribute = "data-original-src";
 
-	/**
-	 * Return the ID of the video in the YouTube URL as an array
-	 */
-	public getVideoIds(youTubeUrl: string, pageContent: string): string[] {
-		if (ObjectUtils.isNullOrUndefined(youTubeUrl)) {
-			return;
+	public createEmbeddedVideosFromHtml(html: string): HTMLIFrameElement[] {
+		if (!html) {
+			return [];
 		}
 
-		let youTubeId: string;
-		if (UrlUtils.getPathname(youTubeUrl).indexOf("/watch") === 0) {
-			youTubeId = UrlUtils.getQueryValue(youTubeUrl, this.youTubeVideoIdQueryKey);
-			if (ObjectUtils.isNullOrUndefined(youTubeId)) {
-				return;
-			}
-		}
+		let divContainer = document.createElement("div") as HTMLDivElement;
+		divContainer.innerHTML = html;
+		let allIframes = divContainer.getElementsByTagName("iframe") as HTMLCollectionOf<HTMLIFrameElement>;
 
-		if (UrlUtils.getPathname(youTubeUrl).indexOf("/embed") === 0) {
-			let youTubeIdMatch = youTubeUrl.match(/youtube\.com\/embed\/(\S+)/);
-			if (ObjectUtils.isNullOrUndefined(youTubeIdMatch) || ObjectUtils.isNullOrUndefined(youTubeIdMatch[1])) {
-				return;
+		let videoEmbeds: HTMLIFrameElement[] = [];
+		for (let i = 0; i < allIframes.length; i++) {
+			if (this.isYoutubeUrl(allIframes[i].src)) {
+				let videoEmbed = this.createEmbeddedVideoFromUrl(allIframes[i].src);
+				if (videoEmbed) {
+					videoEmbeds.push(videoEmbed);
+				}
 			}
-			youTubeId = youTubeIdMatch[1];
-		}
-
-		if (ObjectUtils.isNullOrUndefined(youTubeId)) {
-			return;
 		}
+		return videoEmbeds;
+	}
 
-		// Ensure we remove query parameters
-		return [youTubeId.split("?")[0]];
+	private isYoutubeUrl(url: string): boolean {
+		return /[^\w]youtube\.com\/watch(\?v=(\w+)|.*\&v=(\w+))/.test(url) || /[^\w]youtube\.com\/embed\/(\w+)/.test(url);
 	}
 
-	/**
-	 * Return valid iframe src attribute value for the supported YouTube domain
-	 */
-	public getVideoSrcValues(pageUrl: string, pageContent: string): string[] {
-		if (ObjectUtils.isNullOrUndefined(pageUrl)) {
-			return;
+	public createEmbeddedVideoFromUrl(url: string): HTMLIFrameElement {
+		if (!url) {
+			return undefined;
+		}
+
+		if (UrlUtils.getPathname(url).indexOf("/watch") === 0) {
+			return this.createEmbeddedVideoFromId(UrlUtils.getQueryValue(url, this.youTubeVideoIdQueryKey));
 		}
 
-		let youTubeVideoId = this.getVideoIds(pageUrl, pageContent);
-		if (ObjectUtils.isNullOrUndefined(youTubeVideoId)) {
-			return;
+		if (UrlUtils.getPathname(url).indexOf("/embed") === 0) {
+			let youTubeIdMatch = url.match(/youtube\.com\/embed\/(\S+)/);
+			return this.createEmbeddedVideoFromId(youTubeIdMatch[1]);
 		}
 
-		return ["https://www.youtube.com/embed/" + youTubeVideoId];
+		return undefined;
 	}
 
-	/**
-	 * Create iframe in correct format for YouTube video embed in OneNote.
-	 * Supports a single video.
-	 */
-	public createEmbeddedVideos(pageUrl: string, pageContent: string): HTMLIFrameElement[] {
-		let iframe = DomUtils.createEmbedVideoIframe();
-		let srcValue = this.getVideoSrcValues(pageUrl, pageContent);
-		let videoId = this.getVideoIds(pageUrl, pageContent)[0];
-		if (ObjectUtils.isNullOrUndefined(srcValue) || ObjectUtils.isNullOrUndefined(videoId)) {
-			// fast fail: we expect all page urls passed into this function in prod to contain a video id
-			throw new Error("YouTube page url does not contain video id");
+	public createEmbeddedVideoFromId(id: string): HTMLIFrameElement {
+		if (!id) {
+			return undefined;
 		}
-		iframe.src = srcValue[0];
-		iframe.setAttribute(this.dataOriginalSrcAttribute, UrlUtils.addUrlQueryValue(this.youTubeWatchVideoBaseUrl, this.youTubeVideoIdQueryKey, videoId));
 
-		return [iframe];
+		let videoEmbed = DomUtils.createEmbedVideoIframe();
+		let src = "https://www.youtube.com/embed/" + id;
+		videoEmbed.src = src;
+		let dataOriginalSrc = UrlUtils.addUrlQueryValue(this.youTubeWatchVideoBaseUrl, this.youTubeVideoIdQueryKey, id);
+		videoEmbed.setAttribute(this.dataOriginalSrcAttribute, dataOriginalSrc);
+		return videoEmbed;
 	}
 }