Update video and links (#17)

* update .gitignore * update video * update styles and links
openclarity · Oct 13, 2022 · cf659ac · cf659ac
1 parent cd094cc
commit cf659ac
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 16 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 
 # dependencies
 /openclarity.io/node_modules
+/node_modules
 /.pnp
 .pnp.js
 
@@ -11,9 +12,12 @@
 # next.js
 /openclarity.io/.next/
 /openclarity.io/out/
+/.next
+/out
 
 # production
 /openclarity.io/build
+/build
 
 # misc
 .DS_Store

diff --git a/components/pages/home/Card.tsx b/components/pages/home/Card.tsx
@@ -14,7 +14,7 @@ const Card = ({ logo, subLogo, description, link }: Props) => {
   const { width } = useWindowSize();
   return (
     <div
-      className={width < 900 ? gridStyles.Span12 : gridStyles.Span4}
+      className={width > 1200 ? gridStyles.Span4 : (width > 820 ? gridStyles.Span6 : gridStyles.Span12)}
       style={{ display: "flex", justifyContent: "center" }}
     >
       <div className={styles.Card}>

diff --git a/components/pages/home/WhatIsSection.tsx b/components/pages/home/WhatIsSection.tsx
@@ -4,29 +4,30 @@ import Container from "../../Container";
 import gridStyles from "../../../styles/layout/Grid.module.scss";
 import { AiFillGithub } from "react-icons/ai";
 import { ImCheckmark } from "react-icons/im";
-import YoutubeEmbed from "../../YoutubeEmbed";
+import ReactPlayerLoader from "@brightcove/react-player-loader";
+
 type Props = {
   title: string;
   description: string;
   keyCapabilities: string[];
-  video?: string;
   githubLink: string;
   documentationLink: string;
   mainColor: string;
   thumbnail: string;
   diagram: string;
+  videoID: string;
 };
 
 const WhatIsSection = ({
   title,
   description,
   keyCapabilities,
-  video,
   githubLink,
   documentationLink,
   mainColor,
   thumbnail,
   diagram,
+  videoID,
 }: Props) => {
   return (
     <div className={styles.Wrapper} style={{ backgroundColor: mainColor }}>
@@ -40,7 +41,13 @@ const WhatIsSection = ({
             </h1>
             <div className={styles.Content}>
               <p className={styles.Description}>{description}</p>
-              <YoutubeEmbed embedId="tkVOf1lrxag" />
+              <div className={styles.ContentVideo}>
+                <ReactPlayerLoader
+                  accountId="1384193102001"
+                  videoId={videoID}
+                  playerId="HkD0dCe7"
+                />
+              </div>
               <img src={diagram} alt="diagram" className={styles.Diagram} />
               <h2 className={styles.Header}>Key Capabilities:</h2>
               <ul className={styles.KeyCapabilities}>

diff --git a/data/landingPageArrs.tsx b/data/landingPageArrs.tsx
@@ -74,6 +74,6 @@ export const maintainersArr: ICompanyObj[] = [
 	{
 		name: "Cisco",
 		logo: ImgPaths.CiscoLogoBlue,
-		link: "https://www.ciscodesignpartners.com/application-security",
+		link: "https://panoptica.app",
 	},
 ];
diff --git a/data/whatIsData.tsx b/data/whatIsData.tsx
@@ -16,7 +16,7 @@ export const whatIsData = [
     mainColor: "#f0ad42",
     thumbnail: ImgPaths.DefaultThumbnail,
     diagram: ImgPaths.FunctionClarityDiagram,
-    embedId: "QA-yue1GFM0",
+    videoID: "6313395920112",
   },
 
   {
@@ -34,7 +34,7 @@ export const whatIsData = [
     mainColor: "#52BAE6",
     thumbnail: ImgPaths.DefaultThumbnail,
     diagram: ImgPaths.KubeClarityDiagram,
-    embedId: "tkVOf1lrxag",
+    videoID: "6313395145112",
   },
   {
     title: "APIClarity",
@@ -51,6 +51,6 @@ export const whatIsData = [
     mainColor: "#73B736",
     thumbnail: ImgPaths.APIClarityThumbnail,
     diagram: ImgPaths.APIClarityDiagram,
-    embedId: "iLoOxzcX3_E",
+    videoID: "6313395301112",
   },
 ];
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@brightcove/react-player-loader": "^1.4.2",
     "bowser": "^2.11.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -46,6 +46,7 @@ const Home = ({ allPosts }: { allPosts: IBlogMetadata[] }) => {
                 mainColor,
                 thumbnail,
                 diagram,
+                videoID,
               },
               index
             ) => {
@@ -59,6 +60,7 @@ const Home = ({ allPosts }: { allPosts: IBlogMetadata[] }) => {
                   description={description}
                   keyCapabilities={keyCapabilities}
                   diagram={diagram}
+                  videoID={videoID}
                 />
               );
             }
@@ -262,7 +264,7 @@ const CodeSection = () => {
             company={{
               name: "Cisco",
               logo: ImgPaths.CiscoLogoBlue,
-              link: "https://www.ciscodesignpartners.com/application-security",
+              link: "https://panoptica.app",
             }}
           />
         </div>

diff --git a/styles/components/WhatIsSection.module.scss b/styles/components/WhatIsSection.module.scss
@@ -11,11 +11,15 @@
   gap: 29px;
   left: 308px;
   margin-top: 130px;
+
+  &Video {
+    width: 100%;
+		aspect-ratio: 16.1/9;
+  }
 }
 .Header {
   margin-bottom: -10px;
 }
-
 .Title {
   font-style: normal;
   font-weight: 700;

diff --git a/styles/globals.scss b/styles/globals.scss
@@ -72,7 +72,7 @@ a {
   margin-left: 0;
   color: white;
   text-align: center;
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: #fff;
   border-radius: 5px;
   z-index: 20;
   overflow: hidden;
@@ -107,7 +107,6 @@ a {
   background: #58585b;
   border-radius: 100%;
   border: 1px solid #fff;
-  /* display: flex; */
   justify-content: center;
   align-items: center;
   font-size: 21px;
@@ -117,9 +116,15 @@ a {
 }
 .video-js.vjs-thumbnails {
   width: 100%;
-  max-width: 716.8px;
-  min-height: 400px;
-  margin: 0 auto;
+  height: 100%;
+  @media (max-width: 720px) {
+    width: 100%;
+    height: 100%;
+  }
+}
+.vjs-poster{
+  background-position: 50% 50%;
+  background-size: cover;
 }
 .brightcove-react-player-loader {
   display: flex;

diff --git a/yarn.lock b/yarn.lock
@@ -24,6 +24,26 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@brightcove/player-loader@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@brightcove/player-loader/-/player-loader-1.8.0.tgz#e835d7c23e0bf584a03dfefbc4640484d4b187a1"
+  integrity sha512-1JbLYEGDYfAn1N17HeXN2Rjr7Thxhi+E/sK3cU88UJtJaPTt/Oy0xFl9eKifRkmrnEy5boPsvJKywC0DRbKXAw==
+  dependencies:
+    "@brightcove/player-url" "^1.2.0"
+    global "^4.3.2"
+
+"@brightcove/player-url@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@brightcove/player-url/-/player-url-1.2.0.tgz#0ee48670b6299bf7a6ae30063d53f31c38468904"
+  integrity sha512-MhmB5JZAAPG3l3FbLiDrkNo5TKQI4Mp1xZmKk1y0DrIibh1loE14raabI30X3rizKT5ThTdvRmLlVMENUn7Gvw==
+
+"@brightcove/react-player-loader@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@brightcove/react-player-loader/-/react-player-loader-1.4.2.tgz#e0ab0dc25564164eba24a2a1f35bbe2d690135d0"
+  integrity sha512-zLKohh/HJtxPIKtucBcYsjE/Du7f6IgdOt5UKRl88OLpfCERVEaHM/no+3CFuRhV0IOo5/flrsk2qpXOc4i7uA==
+  dependencies:
+    "@brightcove/player-loader" "^1.8.0"
+
 "@eslint/eslintrc@^1.3.2":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.2.tgz#58b69582f3b7271d8fa67fe5251767a5b38ea356"
@@ -974,6 +994,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 dom7@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.4.tgz#8b68c5d8e5e2ed0fddb1cb93e433bc9060c8f3fb"
@@ -1556,6 +1581,14 @@ glob@^7.2.0:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global@^4.3.2:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^13.15.0:
   version "13.17.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.17.0.tgz#902eb1e680a41da93945adbdcb5a9f361ba69bd4"
@@ -2364,6 +2397,13 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -2676,6 +2716,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
 prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"