From c6abeeb8aabf5a91c01a87d42d1d2ab5ba34b5a8 Mon Sep 17 00:00:00 2001 From: spencerwooo Date: Sat, 12 Feb 2022 22:09:54 +0800 Subject: [PATCH] customise embed link menu, close #314 --- components/CustomEmbedLinkMenu.tsx | 109 +++++++++++++++++++++++++++ components/DownloadBtnGtoup.tsx | 53 +++++++------ components/previews/VideoPreview.tsx | 10 +++ pages/_app.tsx | 2 + public/locales/en/common.json | 9 +++ public/locales/zh-CN/common.json | 9 +++ 6 files changed, 171 insertions(+), 21 deletions(-) create mode 100644 components/CustomEmbedLinkMenu.tsx diff --git a/components/CustomEmbedLinkMenu.tsx b/components/CustomEmbedLinkMenu.tsx new file mode 100644 index 0000000..f8e7742 --- /dev/null +++ b/components/CustomEmbedLinkMenu.tsx @@ -0,0 +1,109 @@ +import { Dispatch, Fragment, SetStateAction, useState } from 'react' +import toast from 'react-hot-toast' +import { useTranslation } from 'next-i18next' +import { Dialog, Transition } from '@headlessui/react' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { useClipboard } from 'use-clipboard-copy' + +import { getBaseUrl } from '../utils/getBaseUrl' + +export default function CustomEmbedLinkMenu({ + path, + menuOpen, + setMenuOpen, +}: { + path: string + menuOpen: boolean + setMenuOpen: Dispatch> +}) { + const { t } = useTranslation() + const clipboard = useClipboard() + const closeMenu = () => setMenuOpen(false) + + const filename = path.substring(path.lastIndexOf('/') + 1) + const [name, setName] = useState(filename) + + return ( + + +
+ + + + + {/* This element is to trick the browser into centering the modal contents. */} + + +
+ + {t('Customise direct link')} + + + {t('Change the raw file direct link to a URL ending with the extension of the file.')}{' '} + + {t('What is this?')} + + + +
+

{t('Filename')}

+ setName(e.target.value)} + /> +

{t('Default')}

+
+ {`${getBaseUrl()}/api?path=${path}&raw=true`} +
+

{t('Customised')}

+
+ {`${getBaseUrl()}/api/name/`} + {name} + {`?path=${path}&raw=true`} +
+
+ +
+ +
+
+ +
+ + + ) +} diff --git a/components/DownloadBtnGtoup.tsx b/components/DownloadBtnGtoup.tsx index fdee1a8..c03910c 100644 --- a/components/DownloadBtnGtoup.tsx +++ b/components/DownloadBtnGtoup.tsx @@ -1,4 +1,4 @@ -import { MouseEventHandler } from 'react' +import { MouseEventHandler, useState } from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { IconProp } from '@fortawesome/fontawesome-svg-core' import toast from 'react-hot-toast' @@ -10,6 +10,7 @@ import { useRouter } from 'next/router' import { getBaseUrl } from '../utils/getBaseUrl' import { getReadablePath } from '../utils/getReadablePath' +import CustomEmbedLinkMenu from './CustomEmbedLinkMenu' const btnStyleMap = (btnColor?: string) => { const colorMap = { @@ -64,36 +65,46 @@ export const DownloadButton = ({ const DownloadButtonGroup: React.FC<{ downloadUrl: string }> = ({ downloadUrl }) => { const { asPath } = useRouter() const clipboard = useClipboard() + const [menuOpen, setMenuOpen] = useState(false) const { t } = useTranslation() return ( -
- window.open(downloadUrl)} - btnColor="blue" - btnText={t('Download')} - btnIcon="file-download" - btnTitle={t('Download the file directly through OneDrive')} - /> - {/* + +
+ window.open(downloadUrl)} + btnColor="blue" + btnText={t('Download')} + btnIcon="file-download" + btnTitle={t('Download the file directly through OneDrive')} + /> + {/* window.open(`/api/proxy?url=${encodeURIComponent(downloadUrl)}`)} btnColor="teal" btnText={t('Proxy download')} btnIcon="download" btnTitle={t('Download the file with the stream proxied through Vercel Serverless')} /> */} - { - clipboard.copy(`${getBaseUrl()}/api?path=${getReadablePath(asPath)}&raw=true`) - toast.success(t('Copied direct link to clipboard.')) - }} - btnColor="pink" - btnText={t('Copy direct link')} - btnIcon="copy" - btnTitle={t('Copy the permalink to the file to the clipboard')} - /> -
+ { + clipboard.copy(`${getBaseUrl()}/api?path=${getReadablePath(asPath)}&raw=true`) + toast.success(t('Copied direct link to clipboard.')) + }} + btnColor="pink" + btnText={t('Copy direct link')} + btnIcon="copy" + btnTitle={t('Copy the permalink to the file to the clipboard')} + /> + setMenuOpen(true)} + btnColor="teal" + btnText={t('Customise link')} + btnIcon="pen" + /> +
+ ) } diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx index 4bee83e..8c01c88 100644 --- a/components/previews/VideoPreview.tsx +++ b/components/previews/VideoPreview.tsx @@ -1,4 +1,5 @@ import type { OdFileObject } from '../../types' +import { useState } from 'react' import { useRouter } from 'next/router' import { useClipboard } from 'use-clipboard-copy' import DPlayer from 'react-dplayer' @@ -13,11 +14,13 @@ import { DownloadButton } from '../DownloadBtnGtoup' import { DownloadBtnContainer, PreviewContainer } from './Containers' import FourOhFour from '../FourOhFour' import Loading from '../Loading' +import CustomEmbedLinkMenu from '../CustomEmbedLinkMenu' const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => { const { asPath } = useRouter() const clipboard = useClipboard() + const [menuOpen, setMenuOpen] = useState(false) const { t } = useTranslation() // OneDrive generates thumbnails for its video files, we pick the thumbnail with the highest resolution @@ -39,6 +42,7 @@ const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => { return ( <> + {error ? ( @@ -96,6 +100,12 @@ const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => { btnText={t('Copy direct link')} btnIcon="copy" /> + setMenuOpen(true)} + btnColor="teal" + btnText={t('Customise link')} + btnIcon="pen" + /> window.open(`iina://weblink?url=${file['@microsoft.graph.downloadUrl']}`)} diff --git a/pages/_app.tsx b/pages/_app.tsx index 10c2c93..359db7b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -25,6 +25,7 @@ import { } from '@fortawesome/free-regular-svg-icons' import { faSearch, + faPen, faCheck, faPlus, faMinus, @@ -109,6 +110,7 @@ library.add( faThLarge, faThList, faLanguage, + faPen, ...iconList ) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 340a306..a8da461 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -14,18 +14,25 @@ "Authorisation is required as no valid <2>access_token or <5>refresh_token is present on this deployed instance. Check the following configurations before proceeding with authorising onedrive-vercel-index with your own Microsoft account.": "Authorisation is required as no valid <2>access_token or <5>refresh_token is present on this deployed instance. Check the following configurations before proceeding with authorising onedrive-vercel-index with your own Microsoft account.", "Cancel": "Cancel", "Cannot preview {{path}}": "Cannot preview {{path}}", + "Change the raw file direct link to a URL ending with the extension of the file.": "Change the raw file direct link to a URL ending with the extension of the file.", "Check out <2>Microsoft's official explanation on the error message.": "Check out <2>Microsoft's official explanation on the error message.", "Clear all": "Clear all", "Clear all tokens?": "Clear all tokens?", "Cleared all tokens": "Cleared all tokens", "clearing them means that you will need to re-enter the passwords again.": "clearing them means that you will need to re-enter the passwords again.", + "Copied customised link to clipboard.": "Copied customised link to clipboard.", "Copied direct link to clipboard.": "Copied direct link to clipboard.", "Copied folder permalink.": "Copied folder permalink.", "Copied raw file permalink.": "Copied raw file permalink.", + "Copy custom link to clipboard": "Copy custom link to clipboard", "Copy direct link": "Copy direct link", "Copy folder permalink": "Copy folder permalink", "Copy raw file permalink": "Copy raw file permalink", "Copy the permalink to the file to the clipboard": "Copy the permalink to the file to the clipboard", + "Customise direct link": "Customise direct link", + "Customise link": "Customise link", + "Customised": "Customised", + "Default": "Default", "Do not pretend to be the site owner": "Do not pretend to be the site owner", "Don't worry, after storing them, onedrive-vercel-index will take care of token refreshes and updates after your site goes live.": "Don't worry, after storing them, onedrive-vercel-index will take care of token refreshes and updates after your site goes live.", "Download": "Download", @@ -47,6 +54,7 @@ "Failed to download selected files.": "Failed to download selected files.", "File is empty.": "File is empty.", "File size": "File size", + "Filename": "Filename", "Final step, click the button below to store these tokens persistently before they expire after {{minutes}} minutes {{seconds}} seconds. ": "Final step, click the button below to store these tokens persistently before they expire after {{minutes}} minutes {{seconds}} seconds. ", "Finished downloading folder.": "Finished downloading folder.", "Finished downloading selected files.": "Finished downloading selected files.", @@ -106,6 +114,7 @@ "Waiting for code...": "Waiting for code...", "Weibo": "Weibo", "Welcome to your new onedrive-vercel-index 🎉": "Welcome to your new onedrive-vercel-index 🎉", + "What is this?": "What is this?", "Where is the auth code? Did you follow step 2 you silly donut?": "Where is the auth code? Did you follow step 2 you silly donut?", "Whoops, looks like we got a problem: {{error}}.": "Whoops, looks like we got a problem: {{error}}." } diff --git a/public/locales/zh-CN/common.json b/public/locales/zh-CN/common.json index 62236ef..4d8f028 100644 --- a/public/locales/zh-CN/common.json +++ b/public/locales/zh-CN/common.json @@ -12,18 +12,25 @@ "Authorisation is required as no valid <2>access_token or <5>refresh_token is present on this deployed instance. Check the following configurations before proceeding with authorising onedrive-vercel-index with your own Microsoft account.": "本项目还没有设置有效的 <2>access_token 和 <5>refresh_token，需要进行授权。在继续对 onedrive-vercel-index 授权你的 Microsoft 帐号前，请检查一下下方的配置信息。", "Cancel": "取消", "Cannot preview {{path}}": "无法预览 {{path}}", + "Change the raw file direct link to a URL ending with the extension of the file.": "将文件直链接更改为以文件扩展名结尾的 URL。", "Check out <2>Microsoft's official explanation on the error message.": "请查阅 <2>Microsoft 官方解释 以获取详细的错误信息。", "Clear all": "清除所有密钥", "Clear all tokens?": "清除所有密钥？", "Cleared all tokens": "已清除所有密钥", "clearing them means that you will need to re-enter the passwords again.": "清除它们意味着下次访问时你需要重新输入密钥。", + "Copied customised link to clipboard.": "已复制自定义直链到剪贴板。", "Copied direct link to clipboard.": "已复制直链到剪贴板。", "Copied folder permalink.": "已复制文件夹永久链接。", "Copied raw file permalink.": "已复制文件永久链接。", + "Copy custom link to clipboard": "复制自定义链接", "Copy direct link": "复制文件直链", "Copy folder permalink": "复制文件夹永久链接", "Copy raw file permalink": "复制文件永久链接", "Copy the permalink to the file to the clipboard": "复制文件永久链接到剪贴板", + "Customise direct link": "自定义文件直链", + "Customise link": "自定义直链", + "Customised": "自定义链接", + "Default": "默认", "Do not pretend to be the site owner": "你不是网站所有者", "Don't worry, after storing them, onedrive-vercel-index will take care of token refreshes and updates after your site goes live.": "别担心，存储它们之后，onedrive-vercel-index 会在帮助你定时更新 token", "Download": "下载", @@ -45,6 +52,7 @@ "Failed to download selected files.": "下载选定文件失败。", "File is empty.": "文件为空。", "File size": "文件大小", + "Filename": "文件名", "Final step, click the button below to store these tokens persistently before they expire after {{minutes}} minutes {{seconds}} seconds. ": "最后一步，在这些 tokens 于 {{minutes}} 分钟 {{seconds}} 秒后失效前，点击下方按钮以永久存储这些 tokens", "Finished downloading folder.": "下载文件夹成功。", "Finished downloading selected files.": "下载选定文件成功。", @@ -102,6 +110,7 @@ "Waiting for code...": "等待授权码…", "Weibo": "微博", "Welcome to your new onedrive-vercel-index 🎉": "欢迎来到你崭新的 onedrive-vercel-index 🎉", + "What is this?": "这是什么？", "Where is the auth code? Did you follow step 2 you silly donut?": "授权码呢？你遵守了第 2 步吗？你这个傻瓜甜甜圈！o(￣ヘ￣o＃)", "Whoops, looks like we got a problem: {{error}}.": "Whoops，看来我们遇到了一个问题：{{error}}" }