From e9840d793dae79fabd3b9940f9610f95f2a31120 Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Thu, 16 Feb 2023 13:14:15 +0800 Subject: [PATCH] implement reduced motion closes #1410 --- src/App.jsx | 3 +- src/BottomBar.jsx | 3 +- src/ExportConfirm.jsx | 3 +- src/SegmentList.jsx | 2 +- src/components/ConcatDialog.jsx | 2 +- src/components/OutSegTemplateEditor.jsx | 2 +- src/dialogs/extractFrames.jsx | 3 +- src/dialogs/html5ify.jsx | 4 +- src/dialogs/index.jsx | 3 +- src/dialogs/parameters.jsx | 4 +- src/hooks/useSegments.js | 3 +- src/hooks/useUserSettingsRoot.js | 2 +- src/index.jsx | 5 ++- src/mifi.js | 3 +- src/reporting.jsx | 2 +- src/swal.js | 55 +++++++++++++++++++++++++ src/util.js | 22 +--------- 17 files changed, 84 insertions(+), 37 deletions(-) create mode 100644 src/swal.js diff --git a/src/App.jsx b/src/App.jsx index 8da963fb..46e9bec7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -61,12 +61,13 @@ import { shouldCopyStreamByDefault, getAudioStreams, getRealVideoStreams, isAudi import { exportEdlFile, readEdlFile, saveLlcProject, loadLlcProject, askForEdlImport } from './edlStore'; import { formatYouTube, getFrameCountRaw } from './edlFormats'; import { - getOutPath, getSuffixedOutPath, toast, errorToast, handleError, getOutDir, getFileDir, + getOutPath, getSuffixedOutPath, handleError, getOutDir, getFileDir, checkDirWriteAccess, dirExists, isMasBuild, isStoreBuild, dragPreventer, filenamify, getOutFileExtension, generateSegFileName, defaultOutSegTemplate, havePermissionToReadFile, resolvePathIfNeeded, getPathReadAccessError, html5ifiedPrefix, html5dummySuffix, findExistingHtml5FriendlyFile, deleteFiles, isOutOfSpaceError, getNumDigits, isExecaFailure, readFileSize, readFileSizes, checkFileSizes, setDocumentTitle, } from './util'; +import { toast, errorToast } from './swal'; import { formatDuration } from './util/duration'; import { adjustRate } from './util/rate-calculator'; import { askExtractFramesAsImages } from './dialogs/extractFrames'; diff --git a/src/BottomBar.jsx b/src/BottomBar.jsx index ff6b71bc..311e4d60 100644 --- a/src/BottomBar.jsx +++ b/src/BottomBar.jsx @@ -16,7 +16,8 @@ import ToggleExportConfirm from './components/ToggleExportConfirm'; import CaptureFormatButton from './components/CaptureFormatButton'; import SimpleModeButton from './components/SimpleModeButton'; -import { withBlur, toast, mirrorTransform, checkAppPath } from './util'; +import { withBlur, mirrorTransform, checkAppPath } from './util'; +import { toast } from './swal'; import { getSegColor } from './util/colors'; import { formatDuration, parseDuration } from './util/duration'; import useUserSettings from './hooks/useUserSettings'; diff --git a/src/ExportConfirm.jsx b/src/ExportConfirm.jsx index 090a3992..bfc6fbe0 100644 --- a/src/ExportConfirm.jsx +++ b/src/ExportConfirm.jsx @@ -15,7 +15,8 @@ import ToggleExportConfirm from './components/ToggleExportConfirm'; import OutSegTemplateEditor from './components/OutSegTemplateEditor'; import HighlightedText from './components/HighlightedText'; -import { withBlur, toast } from './util'; +import { withBlur } from './util'; +import { toast } from './swal'; import { isMov as ffmpegIsMov } from './util/streams'; import useUserSettings from './hooks/useUserSettings'; diff --git a/src/SegmentList.jsx b/src/SegmentList.jsx index 3692ab48..7b8bb94d 100644 --- a/src/SegmentList.jsx +++ b/src/SegmentList.jsx @@ -2,13 +2,13 @@ import React, { memo, useMemo, useRef, useCallback } from 'react'; import { FaYinYang, FaSave, FaPlus, FaMinus, FaTag, FaSortNumericDown, FaAngleRight, FaRegCheckCircle, FaRegCircle } from 'react-icons/fa'; import { AiOutlineSplitCells } from 'react-icons/ai'; import { motion } from 'framer-motion'; -import Swal from 'sweetalert2'; import { useTranslation, Trans } from 'react-i18next'; import { ReactSortable } from 'react-sortablejs'; import isEqual from 'lodash/isEqual'; import useDebounce from 'react-use/lib/useDebounce'; import scrollIntoView from 'scroll-into-view-if-needed'; +import Swal from './swal'; import useContextMenu from './hooks/useContextMenu'; import useUserSettings from './hooks/useUserSettings'; import { saveColor, controlsBackground, primaryTextColor } from './colors'; diff --git a/src/components/ConcatDialog.jsx b/src/components/ConcatDialog.jsx index 92cedb87..aeaef53f 100644 --- a/src/components/ConcatDialog.jsx +++ b/src/components/ConcatDialog.jsx @@ -4,9 +4,9 @@ import { TextInput, IconButton, Alert, Checkbox, Dialog, Button, Paragraph } fro import { AiOutlineMergeCells } from 'react-icons/ai'; import { FaQuestionCircle, FaCheckCircle, FaExclamationTriangle } from 'react-icons/fa'; import i18n from 'i18next'; -import Swal from 'sweetalert2'; import withReactContent from 'sweetalert2-react-content'; +import Swal from '../swal'; import { readFileMeta, getSmarterOutFormat } from '../ffmpeg'; import useFileFormatState from '../hooks/useFileFormatState'; import OutputFormatSelect from './OutputFormatSelect'; diff --git a/src/components/OutSegTemplateEditor.jsx b/src/components/OutSegTemplateEditor.jsx index d47d86e0..9bce3058 100644 --- a/src/components/OutSegTemplateEditor.jsx +++ b/src/components/OutSegTemplateEditor.jsx @@ -3,9 +3,9 @@ import { useDebounce } from 'use-debounce'; import i18n from 'i18next'; import { useTranslation } from 'react-i18next'; import { Text, Button, Alert, IconButton, TickIcon, ResetIcon, Heading } from 'evergreen-ui'; -import Swal from 'sweetalert2'; import withReactContent from 'sweetalert2-react-content'; +import Swal from '../swal'; import HighlightedText from './HighlightedText'; import { defaultOutSegTemplate } from '../util'; import useUserSettings from '../hooks/useUserSettings'; diff --git a/src/dialogs/extractFrames.jsx b/src/dialogs/extractFrames.jsx index 0cfce370..99b4b9d3 100644 --- a/src/dialogs/extractFrames.jsx +++ b/src/dialogs/extractFrames.jsx @@ -1,6 +1,7 @@ -import Swal from 'sweetalert2'; import i18n from 'i18next'; +import Swal from '../swal'; + // eslint-disable-next-line import/prefer-default-export export async function askExtractFramesAsImages({ segmentNumFrames, fps }) { diff --git a/src/dialogs/html5ify.jsx b/src/dialogs/html5ify.jsx index dcb3df75..5b504f8f 100644 --- a/src/dialogs/html5ify.jsx +++ b/src/dialogs/html5ify.jsx @@ -1,9 +1,11 @@ import React, { useState, useCallback } from 'react'; import { Checkbox, RadioGroup, Paragraph } from 'evergreen-ui'; -import Swal from 'sweetalert2'; import i18n from 'i18next'; import withReactContent from 'sweetalert2-react-content'; +import Swal from '../swal'; + + const ReactSwal = withReactContent(Swal); diff --git a/src/dialogs/index.jsx b/src/dialogs/index.jsx index 40038214..895b3453 100644 --- a/src/dialogs/index.jsx +++ b/src/dialogs/index.jsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import { HelpIcon, TickCircleIcon, WarningSignIcon, InfoSignIcon, Checkbox } from 'evergreen-ui'; -import Swal from 'sweetalert2'; import i18n from 'i18next'; import { Trans } from 'react-i18next'; import withReactContent from 'sweetalert2-react-content'; @@ -9,7 +8,7 @@ import { tomorrow as style } from 'react-syntax-highlighter/dist/esm/styles/hljs import JSON5 from 'json5'; import { parseDuration, formatDuration } from '../util/duration'; -import { swalToastOptions, toast } from '../util'; +import Swal, { swalToastOptions, toast } from '../swal'; import { parseYouTube } from '../edlFormats'; import CopyClipboardButton from '../components/CopyClipboardButton'; diff --git a/src/dialogs/parameters.jsx b/src/dialogs/parameters.jsx index 651e6db3..b21336fa 100644 --- a/src/dialogs/parameters.jsx +++ b/src/dialogs/parameters.jsx @@ -1,9 +1,11 @@ import React, { useState, useCallback, useRef, useEffect } from 'react'; import { Button, TextInputField, LinkIcon } from 'evergreen-ui'; -import Swal from 'sweetalert2'; import i18n from 'i18next'; import withReactContent from 'sweetalert2-react-content'; +import Swal from '../swal'; + + const { shell } = window.require('electron'); const ReactSwal = withReactContent(Swal); diff --git a/src/hooks/useSegments.js b/src/hooks/useSegments.js index 6893f7b3..8937c77c 100644 --- a/src/hooks/useSegments.js +++ b/src/hooks/useSegments.js @@ -7,7 +7,8 @@ import pMap from 'p-map'; import sortBy from 'lodash/sortBy'; import { blackDetect, silenceDetect, detectSceneChanges as ffmpegDetectSceneChanges, readFrames, mapTimesToSegments, findKeyframeNearTime } from '../ffmpeg'; -import { errorToast, handleError, shuffleArray } from '../util'; +import { handleError, shuffleArray } from '../util'; +import { errorToast } from '../swal'; import { showParametersDialog } from '../dialogs/parameters'; import { createNumSegments as createNumSegmentsDialog, createFixedDurationSegments as createFixedDurationSegmentsDialog, createRandomSegments as createRandomSegmentsDialog, labelSegmentDialog, showEditableJsonDialog, askForShiftSegments, askForAlignSegments, selectSegmentsByLabelDialog } from '../dialogs'; import { createSegment, findSegmentsAtCursor, sortSegments, invertSegments, getSegmentTags, combineOverlappingSegments as combineOverlappingSegments2, isDurationValid, getSegApparentStart, getSegApparentEnd as getSegApparentEnd2 } from '../segments'; diff --git a/src/hooks/useUserSettingsRoot.js b/src/hooks/useUserSettingsRoot.js index bb0c62b3..f1599513 100644 --- a/src/hooks/useUserSettingsRoot.js +++ b/src/hooks/useUserSettingsRoot.js @@ -1,7 +1,7 @@ import { useEffect, useState, useRef, useCallback } from 'react'; import i18n from 'i18next'; -import { errorToast } from '../util'; +import { errorToast } from '../swal'; import isDev from '../isDev'; const remote = window.require('@electron/remote'); diff --git a/src/index.jsx b/src/index.jsx index 7d0512a6..d3cb11e5 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,5 +1,6 @@ import React, { Suspense } from 'react'; import { createRoot } from 'react-dom/client'; +import { MotionConfig } from 'framer-motion'; import App from './App'; import ErrorBoundary from './ErrorBoundary'; @@ -19,7 +20,9 @@ const root = createRoot(container); root.render( }> - + + + , ); diff --git a/src/mifi.js b/src/mifi.js index 06444d8c..fa2cb747 100644 --- a/src/mifi.js +++ b/src/mifi.js @@ -1,7 +1,8 @@ import ky from 'ky'; import { runFfmpegStartupCheck, getFfmpegPath } from './ffmpeg'; -import { toast, handleError } from './util'; +import { toast } from './swal'; +import { handleError } from './util'; import isDev from './isDev'; diff --git a/src/reporting.jsx b/src/reporting.jsx index 113fa86b..bf5a0859 100644 --- a/src/reporting.jsx +++ b/src/reporting.jsx @@ -1,11 +1,11 @@ import React from 'react'; -import Swal from 'sweetalert2'; import withReactContent from 'sweetalert2-react-content'; import i18n from 'i18next'; import { Trans } from 'react-i18next'; import CopyClipboardButton from './components/CopyClipboardButton'; import { isStoreBuild, isMasBuild, isWindowsStoreBuild } from './util'; +import Swal from './swal'; const electron = window.require('electron'); const os = window.require('os'); diff --git a/src/swal.js b/src/swal.js new file mode 100644 index 00000000..98185aaa --- /dev/null +++ b/src/swal.js @@ -0,0 +1,55 @@ +import SwalRaw from 'sweetalert2'; + +import { primaryColor } from './colors'; + + +const { systemPreferences } = window.require('@electron/remote'); + +const animationSettings = systemPreferences.getAnimationSettings(); + +let commonSwalOptions = { + confirmButtonColor: primaryColor, +}; + +if (animationSettings.prefersReducedMotion) { + commonSwalOptions = { + ...commonSwalOptions, + showClass: { + popup: '', + backdrop: '', + icon: '', + }, + hideClass: { + popup: '', + backdrop: '', + icon: '', + }, + }; +} + +const Swal = SwalRaw.mixin({ + ...commonSwalOptions, +}); + +export default Swal; + +export const swalToastOptions = { + ...commonSwalOptions, + toast: true, + position: 'top', + showConfirmButton: false, + showCloseButton: true, + timer: 5000, + timerProgressBar: true, + didOpen: (self) => { + self.addEventListener('mouseenter', Swal.stopTimer); + self.addEventListener('mouseleave', Swal.resumeTimer); + }, +}; + +export const toast = Swal.mixin(swalToastOptions); + +export const errorToast = (text) => toast.fire({ + icon: 'error', + text, +}); diff --git a/src/util.js b/src/util.js index b89db282..bcc05428 100644 --- a/src/util.js +++ b/src/util.js @@ -1,4 +1,3 @@ -import Swal from 'sweetalert2'; import i18n from 'i18next'; import lodashTemplate from 'lodash/template'; import pMap from 'p-map'; @@ -6,6 +5,7 @@ import ky from 'ky'; import prettyBytes from 'pretty-bytes'; import isDev from './isDev'; +import Swal, { toast } from './swal'; const { dirname, parse: parsePath, join, extname, isAbsolute, resolve, basename } = window.require('path'); const fsExtra = window.require('fs-extra'); @@ -99,26 +99,6 @@ export async function transferTimestamps(inPath, outPath, offset = 0) { } } -export const swalToastOptions = { - toast: true, - position: 'top', - showConfirmButton: false, - showCloseButton: true, - timer: 5000, - timerProgressBar: true, - didOpen: (self) => { - self.addEventListener('mouseenter', Swal.stopTimer); - self.addEventListener('mouseleave', Swal.resumeTimer); - }, -}; - -export const toast = Swal.mixin(swalToastOptions); - -export const errorToast = (text) => toast.fire({ - icon: 'error', - text, -}); - export function handleError(arg1, arg2) { console.error('handleError', arg1, arg2);