request all thumbnail on separate route instead
This commit is contained in:
parent
dbb5e185da
commit
cf97983063
5 changed files with 14 additions and 21 deletions
|
@ -12,17 +12,8 @@ import { getReadablePath } from '../utils/getReadablePath'
|
||||||
import { Checkbox, ChildIcon, Downloading, formatChildName } from './FileListing'
|
import { Checkbox, ChildIcon, Downloading, formatChildName } from './FileListing'
|
||||||
|
|
||||||
const GridItem = ({ c, path }: { c: OdFolderChildren; path: string }) => {
|
const GridItem = ({ c, path }: { c: OdFolderChildren; path: string }) => {
|
||||||
// We use the generated medium thumbnail for rendering preview images
|
// We use the generated medium thumbnail for rendering preview images (excluding folders)
|
||||||
const thumbnailUrl =
|
const thumbnailUrl = 'folder' in c ? null : `/api/thumbnail?path=${path}&size=medium`
|
||||||
'folder' in c
|
|
||||||
? // Folders don't have thumbnails
|
|
||||||
null
|
|
||||||
: c.thumbnails && c.thumbnails.length > 0
|
|
||||||
? // Most OneDrive versions, including E5 developer, should have thumbnails returned
|
|
||||||
c.thumbnails[0].medium.url
|
|
||||||
: // According to OneDrive docs, OneDrive for Business and SharePoint does not
|
|
||||||
// (can not retrieve thumbnails via expand). But currently we only see OneDrive 世纪互联 really does not.
|
|
||||||
`/api/thumbnail?path=${path}`
|
|
||||||
|
|
||||||
// Some thumbnails are broken, so we check for onerror event in the image component
|
// Some thumbnails are broken, so we check for onerror event in the image component
|
||||||
const [brokenThumbnail, setBrokenThumbnail] = useState(false)
|
const [brokenThumbnail, setBrokenThumbnail] = useState(false)
|
||||||
|
|
|
@ -21,7 +21,7 @@ const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
// OneDrive generates thumbnails for its video files, we pick the thumbnail with the highest resolution
|
// OneDrive generates thumbnails for its video files, we pick the thumbnail with the highest resolution
|
||||||
const thumbnail = file.thumbnails && file.thumbnails.length > 0 ? file.thumbnails[0].large.url : ''
|
const thumbnail = `/api/thumbnail?path=${asPath}&size=large`
|
||||||
|
|
||||||
// We assume subtitle files are beside the video with the same name, only webvtt '.vtt' files are supported
|
// We assume subtitle files are beside the video with the same name, only webvtt '.vtt' files are supported
|
||||||
const subtitle = `/api?path=${asPath.replace(getExtension(file.name), 'vtt')}&raw=true`
|
const subtitle = `/api?path=${asPath.replace(getExtension(file.name), 'vtt')}&raw=true`
|
||||||
|
|
|
@ -220,7 +220,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||||
headers: { Authorization: `Bearer ${accessToken}` },
|
headers: { Authorization: `Bearer ${accessToken}` },
|
||||||
params: {
|
params: {
|
||||||
select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
|
select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
|
||||||
$expand: 'thumbnails',
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -230,13 +229,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||||
params: next
|
params: next
|
||||||
? {
|
? {
|
||||||
select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
|
select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
|
||||||
$expand: 'thumbnails',
|
|
||||||
top: siteConfig.maxItems,
|
top: siteConfig.maxItems,
|
||||||
$skipToken: next,
|
$skipToken: next,
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
|
select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
|
||||||
$expand: 'thumbnails',
|
|
||||||
top: siteConfig.maxItems,
|
top: siteConfig.maxItems,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -13,8 +13,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||||
const accessToken = await getAccessToken()
|
const accessToken = await getAccessToken()
|
||||||
|
|
||||||
// Get item thumbnails by its path since we will later check if it is protected
|
// Get item thumbnails by its path since we will later check if it is protected
|
||||||
const { path = '' } = req.query
|
const { path = '', size = 'medium' } = req.query
|
||||||
|
|
||||||
|
// Check whether the size is valid - must be one of 'large', 'medium', or 'small'
|
||||||
|
if (size !== 'large' && size !== 'medium' && size !== 'small') {
|
||||||
|
res.status(400).json({ error: 'Invalid size' })
|
||||||
|
return
|
||||||
|
}
|
||||||
// Sometimes the path parameter is defaulted to '[...path]' which we need to handle
|
// Sometimes the path parameter is defaulted to '[...path]' which we need to handle
|
||||||
if (path === '[...path]') {
|
if (path === '[...path]') {
|
||||||
res.status(400).json({ error: 'No path specified.' })
|
res.status(400).json({ error: 'No path specified.' })
|
||||||
|
@ -47,7 +52,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||||
headers: { Authorization: `Bearer ${accessToken}` },
|
headers: { Authorization: `Bearer ${accessToken}` },
|
||||||
})
|
})
|
||||||
|
|
||||||
const thumbnailUrl = data.value && data.value.length > 0 ? (data.value[0] as OdThumbnail).medium.url : null
|
const thumbnailUrl = data.value && data.value.length > 0 ? (data.value[0] as OdThumbnail)[size].url : null
|
||||||
if (thumbnailUrl) {
|
if (thumbnailUrl) {
|
||||||
res.redirect(thumbnailUrl)
|
res.redirect(thumbnailUrl)
|
||||||
} else {
|
} else {
|
||||||
|
|
8
types/index.d.ts
vendored
8
types/index.d.ts
vendored
|
@ -17,8 +17,8 @@ export type OdFolderObject = {
|
||||||
folder?: { childCount: number; view: { sortBy: string; sortOrder: 'ascending'; viewType: 'thumbnails' } }
|
folder?: { childCount: number; view: { sortBy: string; sortOrder: 'ascending'; viewType: 'thumbnails' } }
|
||||||
image?: OdImageFile
|
image?: OdImageFile
|
||||||
video?: OdVideoFile
|
video?: OdVideoFile
|
||||||
'thumbnails@odata.context'?: string
|
// 'thumbnails@odata.context'?: string
|
||||||
thumbnails?: Array<OdThumbnail>
|
// thumbnails?: Array<OdThumbnail>
|
||||||
}>
|
}>
|
||||||
}
|
}
|
||||||
export type OdFolderChildren = OdFolderObject['value'][number]
|
export type OdFolderChildren = OdFolderObject['value'][number]
|
||||||
|
@ -33,8 +33,8 @@ export type OdFileObject = {
|
||||||
file: { mimeType: string; hashes: { quickXorHash: string; sha1Hash?: string; sha256Hash?: string } }
|
file: { mimeType: string; hashes: { quickXorHash: string; sha1Hash?: string; sha256Hash?: string } }
|
||||||
image?: OdImageFile
|
image?: OdImageFile
|
||||||
video?: OdVideoFile
|
video?: OdVideoFile
|
||||||
'thumbnails@odata.context'?: string
|
// 'thumbnails@odata.context'?: string
|
||||||
thumbnails?: Array<OdThumbnail>
|
// thumbnails?: Array<OdThumbnail>
|
||||||
}
|
}
|
||||||
// A representation of a OneDrive image file. Some images do not return a width and height, so types are optional.
|
// A representation of a OneDrive image file. Some images do not return a width and height, so types are optional.
|
||||||
export type OdImageFile = {
|
export type OdImageFile = {
|
||||||
|
|
Loading…
Reference in a new issue