Add menu items to save and copy video (#161)

fixtures/fixture-menu.js

@@ -17,6 +17,12 @@ contextMenu({
 			label: 'Unicorn'
 		},
 		actions.separator(),
+		actions.saveVideo(),
+		actions.saveVideoAs(),
+		actions.copyVideoAddress({
+			transform: content => `modified_copy_${content}`
+		}),
+		actions.separator(),
 		actions.copy({
 			transform: content => `modified_copy_${content}`
 		}),

fixtures/fixture.html

@@ -22,6 +22,11 @@ <h1>Fixture</h1>
 		<br>
 		<img src="fixture.jpg">
 		<br>
+		<br>
+		<video controls width="250">
+			<source src="flower.mp4" type="video/mp4">
+			Sorry, your browser doesn't support embedded videos.
+		</video>
 		<div contenteditable="true"><strong>Editable text</strong></div>
 		<br>
 		<a href="https://github.com">Link</a>

fixtures/fixture.js

@@ -39,6 +39,8 @@ contextMenu({
 	showSelectAll: true,
 	showCopyImageAddress: true,
 	showSaveImageAs: true,
+	showCopyVideoAddress: true,
+	showSaveVideoAs: true,
 	showInspectElement: false,
 	showSaveLinkAs: true
 });

index.d.ts

@@ -55,6 +55,16 @@ declare namespace contextMenu {
 		*/
 		readonly saveImageAs?: string;
 
+		/**
+		@default 'Save Video'
+		*/
+		readonly saveVideo?: string;
+
+		/**
+		@default 'Save Video As…'
+		*/
+		readonly saveVideoAs?: string;
+
 		/**
 		@default 'Copy Link'
 		*/
@@ -75,6 +85,11 @@ declare namespace contextMenu {
 		*/
 		readonly copyImageAddress?: string;
 
+		/**
+		@default 'Copy Video Address'
+		*/
+		readonly copyVideoAddress?: string;
+
 		/**
 		@default 'Inspect Element'
 		*/
@@ -106,9 +121,12 @@ declare namespace contextMenu {
 		readonly selectAll: (options: ActionOptions) => MenuItemConstructorOptions;
 		readonly saveImage: (options: ActionOptions) => MenuItemConstructorOptions;
 		readonly saveImageAs: (options: ActionOptions) => MenuItemConstructorOptions;
+		readonly saveVideo: (options: ActionOptions) => MenuItemConstructorOptions;
+		readonly saveVideoAs: (options: ActionOptions) => MenuItemConstructorOptions;
 		readonly copyLink: (options: ActionOptions) => MenuItemConstructorOptions;
 		readonly copyImage: (options: ActionOptions) => MenuItemConstructorOptions;
 		readonly copyImageAddress: (options: ActionOptions) => MenuItemConstructorOptions;
+		readonly copyVideoAddress: (options: ActionOptions) => MenuItemConstructorOptions;
 		readonly inspect: () => MenuItemConstructorOptions;
 		readonly services: () => MenuItemConstructorOptions;
 	}
@@ -202,6 +220,27 @@ declare namespace contextMenu {
 		*/
 		readonly showSaveImageAs?: boolean;
 
+		/**
+		Show the `Copy Video Address` menu item when right-clicking on a video.
+
+		@default false
+		*/
+		readonly showCopyVideoAddress?: boolean;
+
+		/**
+		Show the `Save Video` menu item when right-clicking on a video.
+
+		@default false
+		 */
+		readonly showSaveVideo?: boolean;
+
+		/**
+		Show the `Save Video As…` menu item when right-clicking on a video.
+
+		@default false
+		*/
+		readonly showSaveVideoAs?: boolean;
+
 		/**
 		Show the `Save Link As…` menu item when right-clicking on a link.
 
@@ -283,13 +322,16 @@ declare namespace contextMenu {
 		- `showCopyImage`
 		- `showCopyImageAddress`
 		- `showSaveImageAs`
+		- `showCopyVideoAddress`
+		- `showSaveVideo`
+		- `showSaveVideoAs`
 		- `showSaveLinkAs`
 		- `showInspectElement`
 		- `showServices`
 
 		To get spellchecking, “Correct Automatically”, and “Learn Spelling” in the menu, please enable the `spellcheck` preference in browser window: `new BrowserWindow({webPreferences: {spellcheck: true}})`
 
-		@default [...dictionarySuggestions, defaultActions.separator(), defaultActions.separator(), defaultActions.learnSpelling(), defaultActions.separator(), defaultActions.lookUpSelection(), defaultActions.separator(),defaultActions.searchWithGoogle(), defaultActions.cut(), defaultActions.copy(), defaultActions.paste(), defaultActions.selectAll(), defaultActions.separator(), defaultActions.saveImage(), defaultActions.saveImageAs(), defaultActions.copyLink(), defaultActions.copyImage(), defaultActions.copyImageAddress(), defaultActions.separator(), defaultActions.copyLink(), defaultActions.saveLinkAs(), defaultActions.separator(), defaultActions.inspect()]
+		@default [...dictionarySuggestions, defaultActions.separator(), defaultActions.separator(), defaultActions.learnSpelling(), defaultActions.separator(), defaultActions.lookUpSelection(), defaultActions.separator(),defaultActions.searchWithGoogle(), defaultActions.cut(), defaultActions.copy(), defaultActions.paste(), defaultActions.selectAll(), defaultActions.separator(), defaultActions.saveImage(), defaultActions.saveImageAs(), defaultActions.saveVideo(), defaultActions.saveVideoAs(), defaultActions.copyLink(), defaultActions.copyImage(), defaultActions.copyImageAddress(), defaultActions.separator(), defaultActions.copyLink(), defaultActions.saveLinkAs(), defaultActions.separator(), defaultActions.inspect()]
 		*/
 		readonly menu?: (
 			defaultActions: Actions,

index.js

@@ -144,6 +144,24 @@ const create = (win, options) => {
 					download(win, props.srcURL, {saveAs: true});
 				}
 			}),
+			saveVideo: decorateMenuItem({
+				id: 'saveVideo',
+				label: 'Save Vide&o',
+				visible: props.mediaType === 'video',
+				click(menuItem) {
+					props.srcURL = menuItem.transform ? menuItem.transform(props.srcURL) : props.srcURL;
+					download(win, props.srcURL);
+				}
+			}),
+			saveVideoAs: decorateMenuItem({
+				id: 'saveVideoAs',
+				label: 'Save Video& As…',
+				visible: props.mediaType === 'video',
+				click(menuItem) {
+					props.srcURL = menuItem.transform ? menuItem.transform(props.srcURL) : props.srcURL;
+					download(win, props.srcURL, {saveAs: true});
+				}
+			}),
 			copyLink: decorateMenuItem({
 				id: 'copyLink',
 				label: 'Copy Lin&k',
@@ -187,6 +205,19 @@ const create = (win, options) => {
 					});
 				}
 			}),
+			copyVideoAddress: decorateMenuItem({
+				id: 'copyVideoAddress',
+				label: 'Copy Video Ad&dress',
+				visible: props.mediaType === 'video',
+				click(menuItem) {
+					props.srcURL = menuItem.transform ? menuItem.transform(props.srcURL) : props.srcURL;
+
+					electron.clipboard.write({
+						bookmark: props.srcURL,
+						text: props.srcURL
+					});
+				}
+			}),
 			inspect: () => ({
 				id: 'inspect',
 				label: 'I&nspect Element',
@@ -254,6 +285,9 @@ const create = (win, options) => {
 			options.showSaveImageAs && defaultActions.saveImageAs(),
 			options.showCopyImage !== false && defaultActions.copyImage(),
 			options.showCopyImageAddress && defaultActions.copyImageAddress(),
+			options.showSaveVideo && defaultActions.saveVideo(),
+			options.showSaveVideoAs && defaultActions.saveVideoAs(),
+			options.showCopyVideoAddress && defaultActions.copyVideoAddress(),
 			defaultActions.separator(),
 			defaultActions.copyLink(),
 			options.showSaveLinkAs && defaultActions.saveLinkAs(),

readme.md

@@ -178,6 +178,27 @@ Default: `false`
 
 Show the `Save Image As…` menu item when right-clicking on an image.
 
+#### showCopyVideoAddress
+
+Type: `boolean`\
+Default: `false`
+
+Show the `Copy Video Address` menu item when right-clicking on a video.
+
+#### showSaveVideo
+
+Type: `boolean`\
+Default: `false`
+
+Show the `Save Video` menu item when right-clicking on a video.
+
+#### showSaveVideoAs
+
+Type: `boolean`\
+Default: `false`
+
+Show the `Save Video As…` menu item when right-clicking on a video.
+
 #### showSaveLinkAs
 
 Type: `boolean`\
@@ -261,6 +282,9 @@ The following options are ignored when `menu` is used:
 - `showCopyImage`
 - `showCopyImageAddress`
 - `showSaveImageAs`
+- `showCopyVideoAddress`
+- `showSaveVideo`
+- `showSaveVideoAs`
 - `showSaveLinkAs`
 - `showInspectElement`
 - `showServices`
@@ -278,8 +302,11 @@ Default actions:
 - `selectAll`
 - `saveImage`
 - `saveImageAs`
+- `saveVideo`
+- `saveVideoAs`
 - `copyImage`
 - `copyImageAddress`
+- `copyVideoAddress`
 - `copyLink`
 - `saveLinkAs`
 - `inspect`