Merge pull request #266 from OneNoteDev/feature/enable-selection-clips-to-grab-videos

Add the ability to save videos in the selection clip

Author: leakymemory

src/scripts/contentCapture/augmentationHelper.ts

@@ -60,6 +60,7 @@ export class AugmentationHelper {
 					let previewElement = AugmentationHelper.getArticlePreviewElement(doc);
 
 					DomUtils.removeElementsNotSupportedInOnml(doc);
+					DomUtils.removeDisallowedIframes(doc);
 					DomUtils.removeBlankImages(doc).then(() => {
 						DomUtils.addPreviewContainerStyling(previewElement);
 						AugmentationHelper.addSupportedVideosToElement(previewElement, pageContent, url);

src/scripts/domParsers/domUtils.ts

@@ -921,14 +921,34 @@ export module DomUtils {
 	 */
 	export function toOnml(doc: Document): Promise<void> {
 		removeElementsNotSupportedInOnml(doc);
-		domReplacer(doc, [Tags.iframe].join());
+		removeDisallowedIframes(doc);
 		removeUnwantedItems(doc);
 		convertRelativeUrlsToAbsolute(doc);
 		removeAllStylesAndClasses(doc);
 		removeEventListenerAttributes(doc);
 		return removeBlankImages(doc);
 	}
 
+	export function removeDisallowedIframes(doc: Document) {
+		// We also detect if the iframe is a video, and we ensure that we have
+		// the correct attribute set so that ONApi recognizes it
+		domReplacer(doc, Tags.iframe, (node) => {
+			let src = (node as HTMLIFrameElement).src;
+			let supportedDomain = VideoUtils.videoDomainIfSupported(src);
+			if (!supportedDomain) {
+				return undefined;
+			}
+
+			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;
+		});
+	}
+
 	function removeAllStylesAndClasses(doc: Document): void {
 		domReplacer(doc, "*", (oldNode, index) => {
 			(<HTMLElement>oldNode).removeAttribute("style");

src/scripts/domParsers/khanAcademyVideoExtractor.ts

@@ -14,13 +14,13 @@ export class KhanAcademyVideoExtractor implements VideoExtractor {
 	public getVideoIds(pageUrl: string, pageContent: string): string[] {
 		// Matches strings of the form id="video_\S+" OR id='video_\S+'
 		// with any amount of whitespace padding in between strings of interest
-		let regex = /id\s*=\s*("\s*video_(\S+)\s*"|'\s*video_(\S+)\s*')/gi;
+		let regex1 = /id\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 regexTwo = /data-youtubeid\s*=\s*("\s*(\S+)\s*"|'\s*(\S+)\s*')/gi;
-		let regexes = [regex, regexTwo];
-		return VideoUtils.matchRegexFromPageContent(pageContent, regexes);
+		let regex2 = /data-youtubeid\s*=\s*("\s*(\S+)\s*"|'\s*(\S+)\s*')/gi;
+
+		return VideoUtils.matchRegexFromPageContent(pageContent, [regex1, regex2]);
 	}
 
 	public getVideoSrcValues(pageUrl: string, pageContent: string): string[] {

src/scripts/domParsers/videoUtils.ts

@@ -46,19 +46,16 @@ export module VideoUtils {
 			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_###
-		let m;
+		let match: RegExpExecArray;
 		let matches = [];
 		regexes.forEach((regex) => {
-			while (m = regex.exec(pageContent)) {
-				if (m[2]) {
-					matches.push(m[2]);
-				} else {
-					matches.push(m[3]);
+			// Calling exec multiple times with the same parameter will continue finding matches until
+			// there are no more
+			while (match = regex.exec(pageContent)) {
+				if (match[2]) {
+					matches.push(match[2]);
+				} else if (match[3]) {
+					matches.push(match[3]);
 				}
 			}
 		});

src/scripts/domParsers/vimeoVideoExtractor.ts

@@ -20,8 +20,12 @@ export class VimeoVideoExtractor implements VideoExtractor {
 		// 		- ignore casing
 		// 		- ignore possible whitespacing variations between characters
 		// 		- accept the use of either double- or single-quotes around clip_###
-		let regex = /id\s*=\s*("\s*clip_(\d+)\s*"|'\s*clip_(\d+)\s*')/gi;
-		return VideoUtils.matchRegexFromPageContent(pageContent, [regex]);
+		let regex1 = /id\s*=\s*("\s*clip_(\d+)\s*"|'\s*clip_(\d+)\s*')/gi;
+
+		// also account for embedded Vimeo videos
+		let regex2 = /player\.vimeo\.com\/video\/((\d+))\d{0}/gi;
+
+		return VideoUtils.matchRegexFromPageContent(pageContent, [regex1, regex2]);
 	}
 
 	/**

src/scripts/domParsers/youtubeVideoExtractor.ts

@@ -37,7 +37,8 @@ export class YoutubeVideoExtractor implements VideoExtractor {
 			return;
 		}
 
-		return [youTubeId];
+		// Ensure we remove query parameters
+		return [youTubeId.split("?")[0]];
 	}
 
 	/**

src/tests/domParsers/domUtils_tests.ts

@@ -265,9 +265,13 @@ export class DomUtilsTests extends TestModule {
 			DomUtils.addEmbeddedVideosWhereSupported(previewElement, vimeoPageContentWithMultipleClipIds, "https://vimeo.com/album/3637653/").then((videoSrcUrls: DomUtils.EmbeddedVideoIFrameSrcs[]) => {
 				let expectedVideoIds = ["45196609", "45196610", "45196611"];
 				for (let i = 0; i < expectedVideoIds.length; i++) {
-					let expectedUrl = "https://player.vimeo.com/video/" + expectedVideoIds[i];
-					strictEqual(videoSrcUrls[i].dataOriginalSrcAttribute, expectedUrl, "expected dataOriginalSrcAttribute: " + expectedUrl);
-					strictEqual(videoSrcUrls[i].srcAttribute, expectedUrl, "expected srcAttribute: " + expectedUrl);
+					if (!videoSrcUrls[i]) {
+						ok(false, "The video id " + expectedVideoIds[i] + " is missing in the return videoSrcUrls");
+					} else {
+						let expectedUrl = "https://player.vimeo.com/video/" + expectedVideoIds[i];
+						strictEqual(videoSrcUrls[i].dataOriginalSrcAttribute, expectedUrl, "expected dataOriginalSrcAttribute: " + expectedUrl);
+						strictEqual(videoSrcUrls[i].srcAttribute, expectedUrl, "expected srcAttribute: " + expectedUrl);
+					}
 				}
 			}, (error: OneNoteApi.GenericError) => {
 				ok(false, "reject should not be called");