create-nextjs-cms 0.9.30 → 0.9.31

package/templates/default/components/media/protected-image.tsx

@@ -1,143 +1,143 @@
-import Image from 'next/image'
-import React, { useEffect } from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/api/client'
-import { AxiosInstance } from 'axios'
-import { base64ToBlob } from 'nextjs-cms/utils'
-
-const defaultDataPlaceholder: string =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPkY2Q8AgABCwDWK6njxAAAAABJRU5ErkJggg=='
-
-async function getProtectedPhoto({
-    src,
-    axiosPrivate,
-}: {
-    src: string
-    axiosPrivate: AxiosInstance
-}): Promise<string | null> {
-    try {
-        const res = await axiosPrivate.get(src)
-        return res.data
-    } catch (error) {
-        return null
-    }
-}
-
-const ProtectedImage = ({
-    section,
-    photo,
-    isThumb = false,
-    alt,
-    width,
-    height,
-    fill = false,
-    className = 'rounded-3xl object-cover',
-    displayAs = 'blob',
-}: {
-    section: string
-    photo: string
-    isThumb?: boolean
-    alt: string
-    width: number
-    height: number
-    fill?: boolean
-    className?: string
-    displayAs?: 'blob' | 'base64'
-}) => {
-    const axiosPrivate = useAxiosPrivate()
-    const [srcUrl, setSrcUrl] = React.useState<string | null>(null)
-
-    // Use trpc?
-    /*
-    const { data, isLoading } = trpc.files.getPhoto.useQuery({
-        name: photo,
-        folder: section,
-        isThumb: isThumb,
-    })
-
-    useEffect(() => {
-        if (!data) return
-        switch (displayAs) {
-            case 'blob':
-                setSrcUrl(
-                    URL.createObjectURL(
-                        base64ToBlob({
-                            base64: data,
-                            contentType: 'image/webp',
-                            stripHeader: true,
-                        }),
-                    ),
-                )
-                break
-            case 'base64':
-                setSrcUrl(data)
-                break
-        }
-
-        return () => {
-            setSrcUrl(null)
-            if (displayAs === 'blob' && srcUrl) {
-                URL.revokeObjectURL(srcUrl)
-            }
-        }
-    }, [data])
-    */
-    useEffect(() => {
-        if (!photo || !section) return
-        getProtectedPhoto({
-            src: `/photo?name=${photo}&folder=${section}&isThumb=${isThumb}`,
-            axiosPrivate: axiosPrivate,
-        }).then((res) => {
-            if (!res) return
-            switch (displayAs) {
-                case 'blob':
-                    setSrcUrl(
-                        URL.createObjectURL(
-                            base64ToBlob({
-                                base64: res,
-                                contentType: 'image/webp',
-                                stripHeader: true,
-                            }),
-                        ),
-                    )
-                    break
-                case 'base64':
-                    setSrcUrl(res)
-                    break
-            }
-        })
-
-        return () => {
-            setSrcUrl(null)
-            if (displayAs === 'blob' && srcUrl) {
-                URL.revokeObjectURL(srcUrl)
-            }
-        }
-    }, [])
-
-    return (
-        <Image
-            alt={alt}
-            className={className}
-            src={srcUrl ? srcUrl : defaultDataPlaceholder}
-            width={fill ? undefined : width}
-            height={fill ? undefined : height}
-            style={
-                !fill
-                    ? {
-                          width: `${width}px`,
-                          height: 'auto',
-                      }
-                    : undefined
-            }
-            fill={fill ? true : undefined}
-            onLoad={(e) => {
-                // Revoke the blob url after the image is loaded
-                if (displayAs === 'blob' && srcUrl) {
-                    URL.revokeObjectURL(srcUrl)
-                }
-            }}
-        />
-    )
-}
-
-export default ProtectedImage
+import Image from 'next/image'
+import React, { useEffect } from 'react'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
+import { AxiosInstance } from 'axios'
+import { base64ToBlob } from 'nextjs-cms/utils'
+
+const defaultDataPlaceholder: string =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPkY2Q8AgABCwDWK6njxAAAAABJRU5ErkJggg=='
+
+async function getProtectedPhoto({
+    src,
+    axiosPrivate,
+}: {
+    src: string
+    axiosPrivate: AxiosInstance
+}): Promise<string | null> {
+    try {
+        const res = await axiosPrivate.get(src)
+        return res.data
+    } catch (error) {
+        return null
+    }
+}
+
+const ProtectedImage = ({
+    section,
+    photo,
+    isThumb = false,
+    alt,
+    width,
+    height,
+    fill = false,
+    className = 'rounded-3xl object-cover',
+    displayAs = 'blob',
+}: {
+    section: string
+    photo: string
+    isThumb?: boolean
+    alt: string
+    width: number
+    height: number
+    fill?: boolean
+    className?: string
+    displayAs?: 'blob' | 'base64'
+}) => {
+    const axiosPrivate = useAxiosPrivate()
+    const [srcUrl, setSrcUrl] = React.useState<string | null>(null)
+
+    // Use trpc?
+    /*
+    const { data, isLoading } = trpc.files.getPhoto.useQuery({
+        name: photo,
+        folder: section,
+        isThumb: isThumb,
+    })
+
+    useEffect(() => {
+        if (!data) return
+        switch (displayAs) {
+            case 'blob':
+                setSrcUrl(
+                    URL.createObjectURL(
+                        base64ToBlob({
+                            base64: data,
+                            contentType: 'image/webp',
+                            stripHeader: true,
+                        }),
+                    ),
+                )
+                break
+            case 'base64':
+                setSrcUrl(data)
+                break
+        }
+
+        return () => {
+            setSrcUrl(null)
+            if (displayAs === 'blob' && srcUrl) {
+                URL.revokeObjectURL(srcUrl)
+            }
+        }
+    }, [data])
+    */
+    useEffect(() => {
+        if (!photo || !section) return
+        getProtectedPhoto({
+            src: `/photo?name=${photo}&folder=${section}&isThumb=${isThumb}`,
+            axiosPrivate: axiosPrivate,
+        }).then((res) => {
+            if (!res) return
+            switch (displayAs) {
+                case 'blob':
+                    setSrcUrl(
+                        URL.createObjectURL(
+                            base64ToBlob({
+                                base64: res,
+                                contentType: 'image/webp',
+                                stripHeader: true,
+                            }),
+                        ),
+                    )
+                    break
+                case 'base64':
+                    setSrcUrl(res)
+                    break
+            }
+        })
+
+        return () => {
+            setSrcUrl(null)
+            if (displayAs === 'blob' && srcUrl) {
+                URL.revokeObjectURL(srcUrl)
+            }
+        }
+    }, [])
+
+    return (
+        <Image
+            alt={alt}
+            className={className}
+            src={srcUrl ? srcUrl : defaultDataPlaceholder}
+            width={fill ? undefined : width}
+            height={fill ? undefined : height}
+            style={
+                !fill
+                    ? {
+                          width: `${width}px`,
+                          height: 'auto',
+                      }
+                    : undefined
+            }
+            fill={fill ? true : undefined}
+            onLoad={(e) => {
+                // Revoke the blob url after the image is loaded
+                if (displayAs === 'blob' && srcUrl) {
+                    URL.revokeObjectURL(srcUrl)
+                }
+            }}
+        />
+    )
+}
+
+export default ProtectedImage

package/templates/default/components/media/protected-video.tsx

@@ -1,76 +1,76 @@
-import React, { useEffect } from 'react'
-import { useRefreshToken } from 'nextjs-cms/auth/hooks'
-import { useSession } from 'nextjs-cms/auth/react'
-
-const ProtectedVideo = ({
-    section,
-    fieldName,
-    file,
-    width,
-    height,
-    className = 'rounded-3xl object-cover',
-}: {
-    section: string
-    fieldName: string
-    file: string
-    width: number
-    height: number
-    className?: string
-}) => {
-    const refresh = useRefreshToken()
-    const ref = React.useRef<HTMLVideoElement>(null)
-    const [currentTime, setCurrentTime] = React.useState(0)
-    const [isSeeking, setIsSeeking] = React.useState(false)
-
-    const session = useSession()
-    useEffect(() => {
-        if (ref.current && currentTime) {
-            ref.current.currentTime = currentTime
-            ref.current.play().then(() => {})
-        }
-    }, [session])
-
-    return (
-        <div className={className}>
-            {/**
-             * The video will stream as long as the access token is valid
-             * If the access token expires, the video will pause
-             * A refresh token request will be sent to `/api/auth/refresh`
-             * If the refresh token is valid, the video will resume playing
-             * If the refresh token is invalid, the user will be logged out
-             */}
-            <video
-                ref={ref}
-                src={`/api/video?sectionName=${section}&fieldName=${fieldName}&name=${file}`}
-                className='max-w-full'
-                width={width}
-                controls={true}
-                height={height}
-                onErrorCapture={async (e) => {
-                    if (isSeeking) return
-                    setIsSeeking(true)
-                    // console.log('seeked')
-                    /**
-                     * Pause the video
-                     */
-                    e.currentTarget.pause()
-                    /**
-                     * Get the current time of the video and save it in the state
-                     */
-                    setCurrentTime(e.currentTarget.currentTime)
-                    /**
-                     * Refresh the access token
-                     * This will trigger the `useEffect` hook
-                     * and set the current time of the video
-                     * to the time it was paused at
-                     * and play the video
-                     */
-                    await refresh()
-                    setIsSeeking(false)
-                }}
-            />
-        </div>
-    )
-}
-
-export default ProtectedVideo
+import React, { useEffect } from 'react'
+import { useRefreshToken } from 'nextjs-cms/auth/hooks'
+import { useSession } from 'nextjs-cms/auth/react'
+
+const ProtectedVideo = ({
+    section,
+    fieldName,
+    file,
+    width,
+    height,
+    className = 'rounded-3xl object-cover',
+}: {
+    section: string
+    fieldName: string
+    file: string
+    width: number
+    height: number
+    className?: string
+}) => {
+    const refresh = useRefreshToken()
+    const ref = React.useRef<HTMLVideoElement>(null)
+    const [currentTime, setCurrentTime] = React.useState(0)
+    const [isSeeking, setIsSeeking] = React.useState(false)
+
+    const session = useSession()
+    useEffect(() => {
+        if (ref.current && currentTime) {
+            ref.current.currentTime = currentTime
+            ref.current.play().then(() => {})
+        }
+    }, [session])
+
+    return (
+        <div className={className}>
+            {/**
+             * The video will stream as long as the access token is valid
+             * If the access token expires, the video will pause
+             * A refresh token request will be sent to `/api/auth/refresh`
+             * If the refresh token is valid, the video will resume playing
+             * If the refresh token is invalid, the user will be logged out
+             */}
+            <video
+                ref={ref}
+                src={`/api/video?sectionName=${section}&fieldName=${fieldName}&name=${file}`}
+                className='max-w-full'
+                width={width}
+                controls={true}
+                height={height}
+                onErrorCapture={async (e) => {
+                    if (isSeeking) return
+                    setIsSeeking(true)
+                    // console.log('seeked')
+                    /**
+                     * Pause the video
+                     */
+                    e.currentTarget.pause()
+                    /**
+                     * Get the current time of the video and save it in the state
+                     */
+                    setCurrentTime(e.currentTarget.currentTime)
+                    /**
+                     * Refresh the access token
+                     * This will trigger the `useEffect` hook
+                     * and set the current time of the video
+                     * to the time it was paused at
+                     * and play the video
+                     */
+                    await refresh()
+                    setIsSeeking(false)
+                }}
+            />
+        </div>
+    )
+}
+
+export default ProtectedVideo