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 37980a50 - Remove ReactPlayer, -Code Cleanup, - Remove testing code
for debugging (#116)
37980a50 is described below
commit 37980a508c0499dbab9bd2278d647d13c82d3233
Author: Gio <[email protected]>
AuthorDate: Tue Apr 16 18:01:09 2024 +0200
- Remove ReactPlayer, -Code Cleanup, - Remove testing code for debugging
(#116)
* Try with ReactPlayer
* httpEquiv -> http-equiv
* http-equiv; use Head from nextjs
* - Remove ReactPlayer, - Code cleanup, Fix videos
---
app/toberemoved/page.tsx | 30 -------------------
components/TextVideoSplitSection.tsx | 58 +++++-------------------------------
components/VideoEmbed.tsx | 55 +++++-----------------------------
3 files changed, 16 insertions(+), 127 deletions(-)
diff --git a/app/toberemoved/page.tsx b/app/toberemoved/page.tsx
deleted file mode 100644
index 2017d1fb..00000000
--- a/app/toberemoved/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'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 19a663fb..72c9ee59 100644
--- a/components/TextVideoSplitSection.tsx
+++ b/components/TextVideoSplitSection.tsx
@@ -1,12 +1,10 @@
'use client';
-import React, { useEffect, useState } from 'react';
+import React 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;
@@ -14,27 +12,6 @@ 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');
- };
-
- const handleKeyPress = (event) => {
- // Check if the key pressed is 'Enter' or 'Space'
- if (event.key === 'Enter' || event.key === ' ') {
- setIframeLoaded(true);
- window.open(videoUrl, '_blank');
- }
- };
-
return (
<section className="bg-stone-100 dark:bg-gray-900">
<div className="flex flex-col px-5 py-14 sm:flex-row sm:px-6
md:mx-auto md:max-w-screen-outerLiveArea md:gap-20 md:px-[5.5rem]
md:py-[6.5rem]">
@@ -67,32 +44,13 @@ 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}
- onKeyPress={handleKeyPress}
- role="button"
- tabIndex={0} // Make it focusable
- style={{ backgroundImage: `url(${imagePlaceholder})` }}
- aria-label={title || 'Open video in new tab'}
- />
+ <iframe
+ className="h-[197px] w-full md:h-full"
+ src={videoUrl}
+ title={title}
+ allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
+ allowFullScreen
+ ></iframe>
</aside>
</div>
</section>
diff --git a/components/VideoEmbed.tsx b/components/VideoEmbed.tsx
index 12693b1c..e0d46d75 100644
--- a/components/VideoEmbed.tsx
+++ b/components/VideoEmbed.tsx
@@ -1,60 +1,21 @@
'use client';
-import { useState } from 'react';
-
type VideoEmbedProps = {
src: string;
title?: string;
};
const VideoEmbed = ({ src, title }: VideoEmbedProps) => {
- const [iframeLoaded, setIframeLoaded] = useState(false);
- const imagePlaceholder = '/static/images/video_thumbnail.png';
-
- const handlePlaceholderClick = () => {
- setIframeLoaded(true);
- window.open(src, '_blank');
- };
-
- const handleKeyPress = (event) => {
- // Check if the key pressed is 'Enter' or 'Space'
- if (event.key === 'Enter' || event.key === ' ') {
- setIframeLoaded(true);
- window.open(src, '_blank');
- }
- };
-
return (
<div className="aspect-h-9 aspect-w-16">
- <div
- className="video-placeholder flex h-full cursor-pointer
items-center justify-center bg-cover bg-center"
- onClick={handlePlaceholderClick}
- onKeyPress={handleKeyPress}
- role="button"
- tabIndex={0} // Make it focusable
- style={{ backgroundImage: `url(${imagePlaceholder})` }}
- aria-label={title || 'Open video in new tab'} // Improving
accessibility
- />
-
- {/* {!iframeLoaded ? (
- <div
- className="video-placeholder flex h-full cursor-pointer
items-center justify-center bg-cover bg-center"
- onClick={handlePlaceholderClick}
- onKeyPress={handleKeyPress}
- role="button"
- tabIndex={0} // Make it focusable
- style={{ cursor: 'pointer', backgroundImage:
`url(${imagePlaceHolder})` }}
- />
- ) : (
- <iframe
- className="h-full w-full"
- src={src}
- title={title || 'Embedded Video'}
- allowFullScreen
- frameBorder="0"
- allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share"
- ></iframe>
- )} */}
+ <iframe
+ className="h-full w-full"
+ src={src}
+ title={title || 'Embedded Video'}
+ allowFullScreen
+ frameBorder="0"
+ allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share"
+ ></iframe>
</div>
);
};
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
