modify YouTubeFrame to include VideoPrivacy

- also modify galleries and index page for dynamically created pages
ComPlat · Jul 9, 2024 · 4148c68 · 4148c68
1 parent e754d4c
commit 4148c68
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/src/js/gallery.js b/src/js/gallery.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { YouTubeFrame } from "@site/src/js/layout";
 // import ReactMarkdown from "react-markdown";
 
 export function Gallery({ links, titles }) {
@@ -9,12 +10,11 @@ export function Gallery({ links, titles }) {
           <div className="col margin-top--lg margin-bottom--lg">
             {/* <ReactMarkdown source={'## '+ titles[idx]} /> */}
             <h3>{titles[idx]}</h3>
-            <iframe
-              width="320"
-              height="180"
+            <YouTubeFrame
+              width="400"
+              height="225"
               src={link}
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
+              title={titles[idx]}
             />
           </div>
         ))}

diff --git a/src/js/layout.js b/src/js/layout.js
@@ -1,6 +1,18 @@
 import React from 'react';
+import VideoPrivacy from "video-privacy"
+
+// from https://stackoverflow.com/questions/3452546/how-do-i-get-the-youtube-video-id-from-a-url
+function imageUrlForYouTube(url) {
+    let re = /(https?:\/\/)?(((m|www)\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)([_0-9a-z-]+)/i;
+    let id = url.match(re)[8];
+    return `/img/yt_thumbnails/${id}.jpg`;
+}
 
 export const SubTitle = ({ text }) => (<h3 className="subTitle">{text}</h3>);
 export const FigCaption = ({ text }) => (<h3 className="figCaption">{text}</h3>);
-export const YouTubeFrame = ({ src, title }) => (<iframe className="fit-container" src={src} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />);
+export const YouTubeFrame = ({ src, title, width, height }) =>
+(<VideoPrivacy customButtonClass="button button--primary" info="YouTube will track your interaction with them." width={width + "px"} imageUrl={imageUrlForYouTube(src)}>
+    <iframe src={src} title={title} width={width} height={height} allowFullScreen
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" />
+</VideoPrivacy>);
 export const Reader = ({ text }) => (<span className="theme-doc-version-badge badge badge--secondary reader-badge">Reader: {text}</span>);
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -5,6 +5,7 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
+import { YouTubeFrame } from "@site/src/js/layout";
 
 const features = [
   {
@@ -82,13 +83,11 @@ function Home() {
           </div>
           <div className="column">
             <div style={{ margin: '2rem auto 0 auto', textAlign: 'center' }}>
-              <iframe
+              <YouTubeFrame
                 width="640"
                 height="360"
                 src="https://www.youtube-nocookie.com/embed/tZHaP6DW-Dw"
-                title="YouTube video player"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
+                title="Chemotion ELN and repository"
               />
             </div>
           </div>
@@ -146,7 +145,7 @@ function Home() {
           />
         </Link>
       </div>
-    </Layout>
+    </Layout >
   );
 }