\n
\n
\n { isReady && this.props.children }\n
\n
\n
\n
\n \n
\n );\n }\n}\n\nOverlay.propTypes = {\n onMouseUp: PropTypes.elementType.isRequired,\n setCursor: PropTypes.elementType.isRequired,\n startPicking: PropTypes.elementType.isRequired,\n x: PropTypes.number,\n y: PropTypes.number,\n selectedApp: PropTypes.string,\n width: PropTypes.number,\n height: PropTypes.number,\n isMoving: PropTypes.bool,\n isResizing: PropTypes.bool,\n currentHandle: PropTypes.object,\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ]).isRequired,\n isActive: PropTypes.bool,\n isReady: PropTypes.bool,\n screenWidth: PropTypes.number,\n screenHeight: PropTypes.number,\n isRecording: PropTypes.bool\n};\n\nexport default connect(\n [CropperContainer, ActionBarContainer, CursorContainer],\n ({x, y, width, height, isMoving, isResizing, currentHandle, screenWidth, screenHeight, isReady, isActive, isRecording, selectedApp}, actionBar) => ({\n x, y, width, height, isResizing, currentHandle, screenWidth, screenHeight, isReady, isActive, isRecording, isMoving: isMoving || actionBar.isMoving, selectedApp\n }),\n ({stopMoving, stopResizing, stopPicking, startPicking}, actionBar, {setCursor}) => ({\n onMouseUp: () => {\n stopMoving();\n stopResizing();\n stopPicking();\n actionBar.stopMoving();\n },\n setCursor,\n startPicking\n })\n)(Overlay);\n"
},
{
"path": "renderer/components/dialog/actions.js",
"content": "import React, {useState, useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\n\nconst Actions = ({buttons, performAction, defaultId}) => {\n const [activeButton, setActiveButton] = useState();\n const defaultButton = useRef(null);\n\n useEffect(() => {\n setActiveButton();\n if (defaultButton.current) {\n defaultButton.current.focus();\n }\n }, [buttons]);\n\n const action = async index => {\n setActiveButton(index);\n performAction(index);\n };\n\n return (\n
\n {\n buttons.map((button, index) => (\n action(index)}\n >\n {index === activeButton ? button.activeLabel || button.label : button.label}\n \n ))\n }\n\n \n
\n );\n};\n\nActions.propTypes = {\n performAction: PropTypes.elementType,\n defaultId: PropTypes.number,\n buttons: PropTypes.arrayOf(PropTypes.object)\n};\n\nexport default Actions;\n"
},
{
"path": "renderer/components/dialog/body.js",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Body = ({title, message, detail}) => {\n return (\n
\n
{title}
\n
\n {\n detail.split('\\n').map(text => (\n {text}\n ))\n }\n
\n {message &&
{message}
}\n\n \n
\n );\n};\n\nBody.propTypes = {\n title: PropTypes.string,\n message: PropTypes.string,\n detail: PropTypes.string\n};\n\nexport default Body;\n"
},
{
"path": "renderer/components/dialog/icon.js",
"content": "import React from 'react';\n\nconst Icon = () => {\n return (\n
\n
![](\"/static/kap-icon.png\"/)
\n \n
\n );\n};\n\nexport default Icon;\n"
},
{
"path": "renderer/components/editor/controls/left.tsx",
"content": "import VideoControlsContainer from '../video-controls-container';\nimport VideoTimeContainer from '../video-time-container';\nimport {PlayIcon, PauseIcon} from '../../../vectors';\nimport formatTime from '../../../utils/format-time';\n\nconst LeftControls = () => {\n const {isPaused, play, pause} = VideoControlsContainer.useContainer();\n const {currentTime} = VideoTimeContainer.useContainer();\n\n return (\n
\n
\n {\n isPaused ?\n
:\n \n }\n \n
{formatTime(currentTime, {showMilliseconds: false})}
\n \n
\n );\n};\n\nexport default LeftControls;\n"
},
{
"path": "renderer/components/editor/controls/play-bar.tsx",
"content": "import VideoTimeContainer from '../video-time-container';\nimport {useState, useRef} from 'react';\nimport VideoControlsContainer from '../video-controls-container';\nimport Preview from './preview';\n\nconst PlayBar = () => {\n const [resizing, setResizing] = useState(false);\n const [hoverTime, setHoverTime] = useState(0);\n const progress = useRef
();\n\n const {play, pause} = VideoControlsContainer.useContainer();\n const {\n currentTime,\n duration,\n startTime,\n endTime,\n updateTime,\n updateStartTime,\n updateEndTime\n } = VideoTimeContainer.useContainer();\n\n const total = endTime - startTime;\n const current = currentTime - startTime;\n\n const getTimeFromEvent = event => {\n const cursorX = event.clientX;\n const {x, width} = progress.current.getBoundingClientRect();\n\n const percent = (cursorX - x) / width;\n const time = startTime + ((endTime - startTime) * percent);\n\n return Math.max(0, time);\n };\n\n const seek = event => {\n const time = getTimeFromEvent(event);\n\n if (startTime <= time && time <= endTime) {\n updateTime(time);\n }\n };\n\n const updatePreview = event => {\n setHoverTime(getTimeFromEvent(event));\n };\n\n const startResizing = () => {\n setResizing(true);\n pause();\n };\n\n const stopResizing = () => {\n setResizing(false);\n play();\n };\n\n const setStartTime = event => {\n updateStartTime(Number.parseFloat(event.target.value));\n };\n\n const setEndTime = event => {\n updateEndTime(Number.parseFloat(event.target.value));\n };\n\n const previewTime = resizing ? currentTime : hoverTime;\n const previewLabelTime = resizing ? currentTime : (startTime <= hoverTime && hoverTime <= endTime ? hoverTime - startTime : hoverTime);\n const previewDuration = resizing ? total : (startTime <= hoverTime && hoverTime <= endTime ? total : undefined);\n\n return (\n \n );\n};\n\nexport default PlayBar;\n\n// Import PropTypes from 'prop-types';\n// import React from 'react';\n// import classNames from 'classnames';\n\n// import {connect, VideoContainer} from '../../../containers';\n// import Preview from './preview';\n\n// class PlayBar extends React.Component {\n// state = {\n// hoverTime: 0\n// };\n\n// progress = React.createRef();\n\n// getTimeFromEvent = event => {\n// const {startTime, endTime} = this.props;\n\n// const cursorX = event.clientX;\n// const {x, width} = this.progress.current.getBoundingClientRect();\n\n// const percent = (cursorX - x) / width;\n// const time = startTime + ((endTime - startTime) * percent);\n\n// return Math.max(0, time);\n// }\n\n// seek = event => {\n// const {startTime, endTime, seek} = this.props;\n// const time = this.getTimeFromEvent(event);\n\n// if (startTime <= time && time <= endTime) {\n// seek(time);\n// }\n// }\n\n// updatePreview = event => {\n// const time = this.getTimeFromEvent(event);\n// this.setState({hoverTime: time});\n// }\n\n// startResizing = () => {\n// const {pause} = this.props;\n// this.setState({resizing: true});\n// pause();\n// }\n\n// stopResizing = () => {\n// const {play} = this.props;\n// this.setState({resizing: false});\n// play();\n// }\n\n// setStartTime = event => this.props.setStartTime(Number.parseFloat(event.target.value))\n\n// setEndTime = event => this.props.setEndTime(Number.parseFloat(event.target.value))\n\n// render() {\n// const {currentTime = 0, duration, startTime, endTime, hover, src} = this.props;\n\n// if (!src) {\n// return null;\n// }\n\n// const {hoverTime, resizing} = this.state;\n\n// const total = endTime - startTime;\n// const current = currentTime - startTime;\n\n// const previewTime = resizing ? currentTime : hoverTime;\n// const previewLabelTime = resizing ? currentTime : (startTime <= hoverTime && hoverTime <= endTime ? hoverTime - startTime : hoverTime);\n// const previewDuration = resizing ? total : (startTime <= hoverTime && hoverTime <= endTime ? total : undefined);\n\n// const className = classNames('progress-bar-container', {hover});\n\n// return (\n// \n// );\n// }\n// }\n\n// PlayBar.propTypes = {\n// startTime: PropTypes.number,\n// endTime: PropTypes.number,\n// seek: PropTypes.elementType,\n// currentTime: PropTypes.number,\n// duration: PropTypes.number,\n// src: PropTypes.string,\n// setStartTime: PropTypes.elementType,\n// setEndTime: PropTypes.elementType,\n// pause: PropTypes.elementType,\n// play: PropTypes.elementType,\n// hover: PropTypes.bool\n// };\n\n// export default connect(\n// [VideoContainer],\n// ({currentTime, duration, startTime, endTime, src}) => ({currentTime, duration, startTime, endTime, src}),\n// ({seek, setStartTime, setEndTime, pause, play}) => ({seek, setStartTime, setEndTime, pause, play})\n// )(PlayBar);\n"
},
{
"path": "renderer/components/editor/controls/preview.tsx",
"content": "import formatTime from '../../../utils/format-time';\nimport {useRef, useEffect} from 'react';\nimport useEditorWindowState from 'hooks/editor/use-editor-window-state';\n\ntype Props = {\n time: number;\n labelTime: number;\n duration: number;\n hidePreview: boolean;\n};\n\nconst Preview = ({time, labelTime, duration, hidePreview}: Props) => {\n const videoRef = useRef();\n const {filePath} = useEditorWindowState();\n const src = `file://${filePath}`;\n\n useEffect(() => {\n if (!hidePreview) {\n videoRef.current.currentTime = time;\n }\n }, [time, hidePreview]);\n\n return (\n {\n event.stopPropagation();\n }}\n >\n \n );\n};\n\nexport default Preview;\n\n// Import PropTypes from 'prop-types';\n// import React from 'react';\n\n// import formatTime from '../../../utils/format-time';\n\n// class Preview extends React.Component {\n// constructor(props) {\n// super(props);\n// this.videoRef = React.createRef();\n// }\n\n// shouldComponentUpdate(nextProps) {\n// return nextProps.time !== this.props.time || nextProps.hidePreview !== this.props.hidePreview;\n// }\n\n// componentDidUpdate(previousProps) {\n// if (previousProps.time !== this.props.time) {\n// this.videoRef.current.currentTime = this.props.time;\n// }\n// }\n\n// render() {\n// const {labelTime, duration, hidePreview, src} = this.props;\n\n// return (\n//
event.stopPropagation()}>\n//
\n// );\n// }\n// }\n\n// Preview.propTypes = {\n// time: PropTypes.number,\n// labelTime: PropTypes.number,\n// duration: PropTypes.number,\n// hidePreview: PropTypes.bool,\n// src: PropTypes.string\n// };\n\n// export default Preview;\n"
},
{
"path": "renderer/components/editor/controls/right.tsx",
"content": "import {VolumeHighIcon, VolumeOffIcon} from '../../../vectors';\nimport VideoControlsContainer from '../video-controls-container';\nimport VideoMetadataContainer from '../video-metadata-container';\n\nimport formatTime from '../../../utils/format-time';\n\nconst RightControls = () => {\n const {isMuted, mute, unmute} = VideoControlsContainer.useContainer();\n const {hasAudio, duration} = VideoMetadataContainer.useContainer();\n\n // FIXME\n const format = 'mp4';\n\n const canUnmute = !['gif', 'apng'].includes(format) && hasAudio;\n const unmuteColor = canUnmute ? '#fff' : 'rgba(255, 255, 255, 0.40)';\n\n return (\n
\n
{formatTime(duration)}
\n
\n {\n isMuted || !hasAudio ?\n :\n \n }\n
\n \n
\n );\n};\n\nexport default RightControls;\n"
},
{
"path": "renderer/components/editor/conversion/conversion-details.tsx",
"content": "import {UseConversionState} from 'hooks/editor/use-conversion';\n\nconst ConversionDetails = ({conversion, showInFolder}: {conversion: UseConversionState; showInFolder: () => void}) => {\n const message = conversion?.message;\n const title = conversion?.titleWithFormat;\n const description = conversion?.description;\n const size = conversion?.fileSize;\n\n return (\n
\n
{message}
\n
\n
\n
{title}
\n
{description}
\n
\n
{size}
\n
\n \n
\n );\n};\n\nexport default ConversionDetails;\n"
},
{
"path": "renderer/components/editor/conversion/index.tsx",
"content": "import {ExportStatus} from 'common/types';\nimport useConversion from 'hooks/editor/use-conversion';\nimport useConversionIdContext from 'hooks/editor/use-conversion-id';\nimport {useConfirmation} from 'hooks/use-confirmation';\nimport {useMemo} from 'react';\nimport {useKeyboardAction} from '../../../hooks/use-keyboard-action';\nimport ConversionDetails from './conversion-details';\nimport TitleBar from './title-bar';\nimport VideoPreview from './video-preview';\n\nconst dialogOptions = {\n message: 'Are you sure you want to discard this conversion?',\n detail: 'Any progress will be lost.',\n confirmButtonText: 'Discard'\n};\n\nconst EditorConversionView = ({conversionId}: {conversionId: string}) => {\n const {setConversionId} = useConversionIdContext();\n const conversion = useConversion(conversionId);\n\n const inProgress = conversion.state?.status === ExportStatus.inProgress;\n\n const cancel = () => {\n if (inProgress) {\n conversion.cancel();\n }\n };\n\n const safeCancel = useConfirmation(cancel, dialogOptions);\n\n const cancelAndGoBack = () => {\n cancel();\n setConversionId('');\n };\n\n const finalCancel = useMemo(() => inProgress ? safeCancel : () => { /* do nothing */ }, [inProgress]);\n\n useKeyboardAction('Escape', finalCancel);\n\n const showInFolder = () => conversion.showInFolder();\n\n return (\n
\n {\n conversion.copy();\n }}\n retry={() => {\n conversion.retry();\n }}\n showInFolder={showInFolder}/>\n \n \n \n
\n );\n};\n\nexport default EditorConversionView;\n"
},
{
"path": "renderer/components/editor/conversion/title-bar.tsx",
"content": "import TrafficLights from 'components/traffic-lights';\nimport {BackPlainIcon, MoreIcon} from 'vectors';\nimport {UseConversionState} from 'hooks/editor/use-conversion';\nimport {flags} from '../../../common/flags';\nimport {MenuItemConstructorOptions, remote} from 'electron';\nimport {ExportStatus} from '../../../common/types';\nimport {useMemo} from 'react';\nimport {template} from 'lodash';\nimport IconMenu from '../../icon-menu';\n\nconst TitleBar = ({conversion, cancel, copy, retry, showInFolder}: {conversion: UseConversionState; cancel: () => any; copy: () => any; retry: () => any; showInFolder: () => void}) => {\n const {api} = require('electron-util');\n const shouldClose = async () => {\n if (conversion.status === ExportStatus.inProgress && !flags.get('backgroundEditorConversion')) {\n await api.dialog.showMessageBox(remote.getCurrentWindow(), {\n type: 'info',\n message: 'Your export will continue in the background. You can access it through the Export History window.',\n buttons: ['Ok'],\n defaultId: 0\n });\n flags.set('backgroundEditorConversion', true);\n }\n\n return true;\n };\n\n const menuTemplate = useMemo(() => {\n const template: MenuItemConstructorOptions[] = [];\n\n if (conversion?.canCopy) {\n template.push({\n label: 'Copy',\n click: () => copy()\n }, {\n type: 'separator'\n });\n }\n\n if (conversion?.status === ExportStatus.completed) {\n template.push({\n label: 'Show in Finder',\n click: () => showInFolder()\n });\n }\n\n return template;\n }, [conversion?.canCopy, conversion?.status]);\n\n const canRetry = [ExportStatus.canceled, ExportStatus.failed].includes(conversion?.status);\n\n return (\n
\n
\n
\n {canRetry &&
Retry
}\n {\n menuTemplate.length > 0 && (\n
\n \n
\n )\n }\n
\n \n
\n );\n};\n\nexport default TitleBar;\n"
},
{
"path": "renderer/components/editor/conversion/video-preview.tsx",
"content": "import {CancelIcon, SpinnerIcon} from 'vectors';\nimport {UseConversion, UseConversionState} from 'hooks/editor/use-conversion';\nimport {ExportStatus} from 'common/types';\nimport useEditorWindowState from 'hooks/editor/use-editor-window-state';\nimport useConversionIdContext from 'hooks/editor/use-conversion-id';\nimport {flags} from '../../../common/flags';\nimport ReactTooltip from 'react-tooltip';\nimport {useEffect, useRef, useState} from 'react';\nimport classNames from 'classnames';\n\nconst VideoPreview = ({conversion, cancel, showInFolder}: {conversion: UseConversionState; cancel: () => any; showInFolder: () => any}) => {\n const {conversionId} = useConversionIdContext();\n const {filePath} = useEditorWindowState();\n const [tooltipShowing, setTooltipShowing] = useState(!flags.get('editorDragTooltip'));\n const tooltipRef = useRef();\n const src = `file://${filePath}`;\n\n const percentage = conversion?.progress ?? 0;\n const done = conversion && (conversion?.status !== ExportStatus.inProgress);\n\n const onDragStart = (event: any) => {\n event.preventDefault();\n // Has to be the electron one for this\n const {ipcRenderer} = require('electron');\n ipcRenderer.send('drag-export', conversionId);\n };\n\n useEffect(() => {\n if (!done) {\n return;\n }\n\n if (tooltipShowing) {\n ReactTooltip.show(tooltipRef.current);\n } else {\n ReactTooltip.hide(tooltipRef.current);\n }\n }, [tooltipRef.current, tooltipShowing, done]);\n\n const onTooltipClick = event => {\n event.stopPropagation();\n setTooltipShowing(false);\n };\n\n const onTooltipHide = () => {\n flags.set('editorDragTooltip', true);\n };\n\n return (\n
\n {\n done && conversion?.canPreviewExport ?\n 
:\n \n);\n\nconst ProgressCircle = ({percent}: {percent: number}) => {\n const circumference = 12 * 2 * Math.PI;\n const offset = circumference * (1 - percent);\n\n return (\n
\n );\n};\n\nexport default VideoPreview;\n"
},
{
"path": "renderer/components/editor/editor-preview.tsx",
"content": "import TrafficLights from '../traffic-lights';\nimport VideoPlayer from './video-player';\nimport Options from './options';\nimport useEditorWindowState from 'hooks/editor/use-editor-window-state';\n\nconst EditorPreview = () => {\n const {title = 'Editor'} = useEditorWindowState();\n\n return (\n
\n );\n};\n\nexport default EditorPreview;\n"
},
{
"path": "renderer/components/editor/index.tsx",
"content": "import useConversionIdContext from 'hooks/editor/use-conversion-id';\nimport useEditorWindowState from 'hooks/editor/use-editor-window-state';\nimport {useEditorWindowSizeEffect} from 'hooks/editor/use-window-size';\nimport {useEffect, useState} from 'react';\nimport EditorConversionView from './conversion';\nimport EditorPreview from './editor-preview';\nimport classNames from 'classnames';\n\nconst Editor = () => {\n const {conversionId, setConversionId} = useConversionIdContext();\n const state = useEditorWindowState();\n const [isConversionPreviewState, setIsConversionPreviewState] = useState(false);\n\n useEffect(() => {\n if (state.conversionId && !conversionId) {\n setConversionId(state.conversionId);\n }\n }, [state.conversionId]);\n\n useEditorWindowSizeEffect(isConversionPreviewState);\n\n const isTransitioning = Boolean(conversionId) !== isConversionPreviewState;\n\n const className = classNames('container', {\n transitioning: isTransitioning\n });\n\n const onTransitionEnd = () => {\n setIsConversionPreviewState(Boolean(conversionId));\n };\n\n return (\n
![](\"https://getkap.co/static/favicon/kap.svg\")
\n ![\"Build](\"https://circleci.com/gh/wulkano/Kap.svg?style=shield\")
![\"XO](\"https://img.shields.io/badge/code_style-XO-5ed9c7.svg\"){kind=icon}
![](\"https://cloud.githubusercontent.com/assets/170270/26560296/8ac42740-44df-11e7-88f5-46f8483ffea1.jpg\")
\n\n```\n| Save to Disk |\n| Upload to Dropbox |\n| Share on GIPHY |\n```\n\nIn the above case, the second and third item are added by two different share services.\n\nThe share service is a plain object defining some metadata:\n\n- `title`: The title used in the export menu. For example: `Share to GIPHY`.![](\"../media/plugins/hexColor.png\")
\n\n#### `keyboardShortcut`\n\n[List of possible values](https://www.electronjs.org/docs/api/accelerator)\n\n```js\nconst config = {\n keyboardShortcut: {\n title: 'Toggle Unicorn Mode',\n customType: 'keyboardShortcut',\n required: true,\n default: 'Command+Shift+5'\n }\n};\n\n// Later\n\nelectron.globalShortcut.register(config.get('shortcut'), () => { /* ... */ });\n```\n\n**Note:** Kap will not register any action for the keyboard shortcut. That is up to the plugin implementation.\n\n## General APIs\n\nEvery type of plugin and service can additionally export the following:\n- `didInstall(config)`: A hook that will be called when the plugin is first installed.\n- `didConfigChange(newValues, oldValues, config)`: A hook that will be called whenever the config of the plugin is changed.\n- `willUninstall(config)`: A hook that will be called when a plugin is being uninstalled. It can be used to clean up artifacts.\n\nIn addition to these, each plugin needs to export at least one of the following:\n- `shareServices`: an array of share services and described above\n- `editServices`: an array of edit services and described above\n- `recordServices`: an array of record services and described above\n\n## OAuth\n\nSometimes services require an [OAuth](https://oauth.net/2/) flow to retrieve a token. These flows are often required to be completed in the browser and not in a webview. For this reason, Kap provides deep linking support. Follow these steps to support OAuth in your plugin:\n\n- When the export starts, check if the `accessToken` is available (if you have already authenticated) in the plugin config. This should not be listed in the JSON Schema options mentioned above unless the user is meant to edit them.\n- If it's not available, [open an external link](https://www.electronjs.org/docs/api/shell#shellopenexternalurl-options) to the OAuth provider's page with the correct parameters. Usually client ID.\n- When registering the app, provide something like `kap://plugins/{pluginName}/auth` as the callback URL.\n- Call `context.waitForDeepLink()` and wait for the user to go through the process.\n- When the above call resolves, you'll have the remaining path, along with any extra info the API added. In the above example, it would be something like `auth?code=###`.\n- You can now exchange the code for a token, and then store that in the config, so you can use it for future exports.\n\nFor an example of this flow in action, check out [kap-dropbox](https://github.com/karaggeorge/kap-dropbox).\n\nIf the API provider only allows HTTP/HTTPS URLs, or if you don't want to do the code exchange in the plugin (to avoid having the secret in the code), you might need to create a proxy, similar to the [one used for kap-dropbox](https://github.com/karaggeorge/kap-dropbox/tree/main/oauth-proxy), to trigger the deep link.\n\n## Removing your Kap plugin\n\nSince npm doesn't allow you to remove packages from the registry, Kap filters out deprecated packages in the plugin list.\n\nWhen you are ready to retire your Kap plugin, simply run `npm deprecate kap-plugin \"Deprecated\"`.\n\n[Read more about the `npm-deprecate` command](https://docs.npmjs.com/cli/deprecate)\n"
},
{
"path": "main/aperture.ts",
"content": "import {windowManager} from './windows/manager';\nimport {setRecordingTray, setPausedTray, disableTray, resetTray} from './tray';\nimport {setCropperShortcutAction} from './global-accelerators';\nimport {settings} from './common/settings';\nimport {track} from './common/analytics';\nimport {plugins} from './plugins';\nimport {getAudioDevices, getSelectedInputDeviceId} from './utils/devices';\nimport {showError} from './utils/errors';\nimport {RecordServiceContext, RecordServiceState} from './plugins/service-context';\nimport {setCurrentRecording, updatePluginState, stopCurrentRecording} from './recording-history';\nimport {Recording} from './video';\nimport {ApertureOptions, StartRecordingOptions} from './common/types';\nimport {InstalledPlugin} from './plugins/plugin';\nimport {RecordService, RecordServiceHook} from './plugins/service';\nimport {getCurrentDurationStart, getOverallDuration, setCurrentDurationStart, setOverallDuration} from './utils/track-duration';\n\nconst createAperture = require('aperture');\nconst aperture = createAperture();\n\nlet recordingPlugins: Array<{plugin: InstalledPlugin; service: RecordService}> = [];\nconst serviceState = new Map