This is an automated email from the ASF dual-hosted git repository.
xiangfu pushed a commit to branch new-site-dev
in repository https://gitbox.apache.org/repos/asf/pinot-site.git
The following commit(s) were added to refs/heads/new-site-dev by this push:
new 17939a33 ReactPlayer, use Head from nextjs, move it above (#115)
17939a33 is described below
commit 17939a33e846f98303fc426b4a9ff4a82fbbad68
Author: Gio <[email protected]>
AuthorDate: Tue Apr 16 00:52:31 2024 +0200
ReactPlayer, use Head from nextjs, move it above (#115)
* Try with ReactPlayer
* httpEquiv -> http-equiv
* http-equiv; use Head from nextjs
---
app/layout.tsx | 13 +++++++------
app/toberemoved/page.tsx | 30 ++++++++++++++++++++++++++++++
components/TextVideoSplitSection.tsx | 26 +++++++++++++++++++++++++-
next.config.js | 16 ++++++++--------
4 files changed, 70 insertions(+), 15 deletions(-)
diff --git a/app/layout.tsx b/app/layout.tsx
index 72915395..03144b83 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -10,6 +10,7 @@ import Footer from '@/components/Footer';
import siteMetadata from '@/data/siteMetadata';
import { ThemeProviders } from './theme-providers';
import { Metadata } from 'next';
+import Head from 'next/head';
const work_sans = Work_Sans({
subsets: ['latin'],
@@ -64,7 +65,11 @@ export default function RootLayout({ children }: { children:
React.ReactNode })
className={`${work_sans.variable} scroll-smooth`}
suppressHydrationWarning
>
- <head>
+ <Head>
+ <meta
+ httpEquiv="Content-Security-Policy"
+ content="default-src 'self';script-src 'self'
'unsafe-eval' 'unsafe-inline' giscus.app analytics.umami.is www.youtube.com
www.googletagmanager.com www.google-analytics.com;style-src 'self'
'unsafe-inline';img-src * blob: data:;media-src *.s3.amazonaws.com;connect-src
*;font-src 'self';frame-src www.youtube.com youtube.com giscus.app youtu.be
https://www.youtube.com https://youtube.com;";
+ />
<link
rel="apple-touch-icon"
sizes="76x76"
@@ -88,15 +93,11 @@ export default function RootLayout({ children }: {
children: React.ReactNode })
href="/static/favicons/safari-pinned-tab.svg"
color="#5bbad5"
/>
- <meta
- httpEquiv="Content-Security-Policy"
- content="default-src 'self';script-src 'self'
'unsafe-eval' 'unsafe-inline' giscus.app analytics.umami.is www.youtube.com
www.googletagmanager.com www.google-analytics.com;style-src 'self'
'unsafe-inline';img-src * blob: data:;media-src *.s3.amazonaws.com;connect-src
*;font-src 'self';frame-src www.youtube.com youtube.com giscus.app youtu.be;"
- />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="theme-color" media="(prefers-color-scheme: light)"
content="#fff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)"
content="#000" />
<link rel="alternate" type="application/rss+xml"
href="/feed.xml" />
- </head>
+ </Head>
<body className="bg-white text-black antialiased dark:bg-gray-950
dark:text-white">
<ThemeProviders>
<Analytics analyticsConfig={siteMetadata.analytics as
AnalyticsConfig} />
diff --git a/app/toberemoved/page.tsx b/app/toberemoved/page.tsx
new file mode 100644
index 00000000..2017d1fb
--- /dev/null
+++ b/app/toberemoved/page.tsx
@@ -0,0 +1,30 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import ReactPlayer from 'react-player';
+
+const ToBeRemoved = () => {
+ const [isSSR, setIsSSR] = useState(true);
+ const imagePlaceholder = '/static/images/video_thumbnail.png';
+
+ useEffect(() => {
+ setIsSSR(false);
+ }, []);
+ return isSSR ? null : (
+ <ReactPlayer
+ url={'https://www.youtube.com/watch?v=_lqdfq2c9cQ'}
+ light={true}
+ // width={'720px'}
+ // height={'480px'}
+ // style={{ border: '1px solid white' }}
+ playing={true}
+ volume={1}
+ pip={true}
+ controls={true}
+ loop={false}
+ stopOnUnmount={true}
+ className="h-[197px] w-full"
+ />
+ );
+};
+
+export default ToBeRemoved;
diff --git a/components/TextVideoSplitSection.tsx
b/components/TextVideoSplitSection.tsx
index 524ff081..19a663fb 100644
--- a/components/TextVideoSplitSection.tsx
+++ b/components/TextVideoSplitSection.tsx
@@ -1,10 +1,12 @@
'use client';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import { Button } from './ui/button';
import { ArrowRight } from 'lucide-react';
import Link from 'next/link';
import siteMetadata from '@/data/siteMetadata';
+// import ReactPlayer from 'react-player';
+import ReactPlayer from 'react-player/youtube';
interface TextVideoSplitSectionProps {
videoUrl: string;
@@ -13,8 +15,13 @@ interface TextVideoSplitSectionProps {
const TextVideoSplitSection: React.FC<TextVideoSplitSectionProps> = ({
videoUrl, title }) => {
const [iframeLoaded, setIframeLoaded] = useState(false);
+ const [isSSR, setIsSSR] = useState(true);
const imagePlaceholder = '/static/images/video_thumbnail.png';
+ useEffect(() => {
+ setIsSSR(false);
+ }, []);
+
const handlePlaceholderClick = () => {
setIframeLoaded(true);
window.open(videoUrl, '_blank');
@@ -60,6 +67,23 @@ const TextVideoSplitSection:
React.FC<TextVideoSplitSectionProps> = ({ videoUrl,
</Button>
</article>
<aside className="flex-1">
+ {/* {isSSR ? null : (
+ <ReactPlayer
+ url={videoUrl}
+ light={true}
+ // width={'720px'}
+ // height={'480px'}
+ // style={{ border: '1px solid white' }}
+ playing={true}
+ volume={1}
+ pip={true}
+ controls={true}
+ loop={false}
+ stopOnUnmount={true}
+ className="h-[197px] w-full"
+ />
+ )} */}
+ {/* <video
src="https://www.youtube.com/watch?v=LXb3EKWsInQ";></video> */}
<div
className="video-placeholder flex h-[197px] w-full
cursor-pointer items-center justify-center bg-cover bg-center md:h-full"
onClick={handlePlaceholderClick}
diff --git a/next.config.js b/next.config.js
index 8de48885..37598825 100644
--- a/next.config.js
+++ b/next.config.js
@@ -75,14 +75,14 @@ module.exports = () => {
}
]
},
- async headers() {
- return [
- {
- source: '/(.*)',
- headers: securityHeaders
- }
- ];
- },
+ // async headers() {
+ // return [
+ // {
+ // source: '/(.*)',
+ // headers: securityHeaders
+ // }
+ // ];
+ // },
webpack: (config, options) => {
config.module.rules.push({
test: /\.svg$/,
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
