Merge pull request #65 from Etesam913/63-add-topprogressbar

63 add topprogressbar
Etesam913 · May 5, 2023 · 3d433a2 · 3d433a2
2 parents b597f5d + 62d3051
commit 3d433a2
Show file tree

Hide file tree

Showing 10 changed files with 357 additions and 206 deletions.
diff --git a/packages/custoplayer/cypress/component/ProgressBars.cy.tsx b/packages/custoplayer/cypress/component/ProgressBars.cy.tsx
@@ -10,6 +10,15 @@ describe('ProgressBars.cy.tsx', () => {
     cy.dataCy('progressBar3').should('exist');
   });
 
+  it("renders topProgressBars", () => {
+    cy.mount(<ProgressBars onTop item={{ id: 'progressBar1' }} />);
+    cy.dataCy('progressBar1').should('exist').should('have.css', 'align-items', 'flex-end');
+    cy.mount(<ProgressBars onTop item={{ id: 'progressBar2' }} />);
+    cy.dataCy('progressBar2').should('exist').should('have.css', 'align-items', 'flex-end');
+    cy.mount(<ProgressBars onTop item={{ id: 'progressBar3' }} />);
+    cy.dataCy('progressBar3').should('exist').should('have.css', 'align-items', 'flex-end');
+  })
+
   it('renders progressBars buffered color', () => {
     let bufferedColor = 'rgb(82, 158, 233)'
     cy.mount(

diff --git a/packages/custoplayer/package.json b/packages/custoplayer/package.json
@@ -1,95 +1,95 @@
 {
-    "name": "custoplayer",
-    "version": "0.1.2",
-    "scripts": {
-        "dev": "vite",
-        "build": "tsc && vite build",
-        "preview": "vite preview",
-        "cy:open-e2e": "cypress open --e2e --browser chrome",
-        "cy:open-unit": "cypress open --component --browser chrome",
-        "cy:run-e2e": "cypress run --e2e",
-        "cy:run-unit": "cypress run --component",
-        "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",
-        "lint": "eslint './src/**/*.{tsx,ts}'",
-        "lint-fix": "eslint './src/**/*.{tsx,ts}' --fix"
-    },
-    "license": "MIT",
-    "files": [
-        "dist"
-    ],
-    "keywords": [
-        "video",
-        "videoplayer",
-        "video-player",
-        "react"
-    ],
-    "main": "./dist/custoplayer.umd.js",
-    "module": "./dist/custoplayer.es.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-        ".": {
-            "import": "./dist/custoplayer.es.js",
-            "require": "./dist/custoplayer.umd.js"
-        }
-    },
-    "nyc": {
-        "reporter": [
-            "html"
-        ]
-    },
-    "resolutions": {
-        "minimist": "^1.2.5"
-    },
-    "dependencies": {
-        "color": "^4.2.3",
-        "framer-motion": "^8.5.0",
-        "jotai": "^1.13.1",
-        "minimist": "^1.2.8",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "screenfull": "^6.0.2",
-        "styled-components": "5.3.5"
-    },
-    "peerDependencies": {
-        "framer-motion": "8.5.0",
-        "jotai": "1.13.1",
-        "react": "17.x || 18.x",
-        "react-dom": " 17.x || 18.x",
-        "styled-components": "5.0.0"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.20.12",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.21.0",
-        "@cypress/code-coverage": "^3.10.0",
-        "@cypress/vite-dev-server": "^5.0.4",
-        "@istanbuljs/nyc-config-typescript": "^1.0.2",
-        "@types/color": "^3.0.3",
-        "@types/node": "^18.11.18",
-        "@types/react": "^18.0.27",
-        "@types/react-dom": "^18.0.10",
-        "@types/styled-components": "^5.1.26",
-        "@typescript-eslint/eslint-plugin": "^5.54.0",
-        "@typescript-eslint/parser": "^5.54.0",
-        "@vitejs/plugin-react": "1.3.2",
-        "acorn-jsx": "5.3.2",
-        "babel-loader": "8.2.4",
-        "babel-plugin-istanbul": "^6.1.1",
-        "cypress": "^12.7.0",
-        "eslint-config-prettier": "^8.6.0",
-        "eslint-plugin-import": "^2.27.5",
-        "eslint-plugin-prettier": "^4.2.1",
-        "eslint-plugin-react": "^7.32.2",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-sonarjs": "^0.18.0",
-        "json": "11.0.0",
-        "nyc": "^15.1.0",
-        "prettier": "^2.8.4",
-        "prettier-eslint": "^15.0.1",
-        "storybook-builder-vite": "0.1.21",
-        "typescript": "^4.9.4",
-        "vite": "^2.9.13",
-        "vite-plugin-dts": "^1.7.1",
-        "vite-plugin-istanbul": "^4.0.1"
+  "name": "custoplayer",
+  "version": "0.2.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "cy:open-e2e": "cypress open --e2e --browser chrome",
+    "cy:open-unit": "cypress open --component --browser chrome",
+    "cy:run-e2e": "cypress run --e2e",
+    "cy:run-unit": "cypress run --component",
+    "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",
+    "lint": "eslint './src/**/*.{tsx,ts}'",
+    "lint-fix": "eslint './src/**/*.{tsx,ts}' --fix"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "video",
+    "videoplayer",
+    "video-player",
+    "react"
+  ],
+  "main": "./dist/custoplayer.umd.js",
+  "module": "./dist/custoplayer.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/custoplayer.es.js",
+      "require": "./dist/custoplayer.umd.js"
     }
+  },
+  "nyc": {
+    "reporter": [
+      "html"
+    ]
+  },
+  "resolutions": {
+    "minimist": "^1.2.5"
+  },
+  "dependencies": {
+    "color": "^4.2.3",
+    "framer-motion": "^8.5.0",
+    "jotai": "^1.13.1",
+    "minimist": "^1.2.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "screenfull": "^6.0.2",
+    "styled-components": "5.3.5"
+  },
+  "peerDependencies": {
+    "framer-motion": "8.5.0",
+    "jotai": "1.13.1",
+    "react": "17.x || 18.x",
+    "react-dom": " 17.x || 18.x",
+    "styled-components": "5.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@cypress/code-coverage": "^3.10.0",
+    "@cypress/vite-dev-server": "^5.0.4",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
+    "@types/color": "^3.0.3",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "@vitejs/plugin-react": "1.3.2",
+    "acorn-jsx": "5.3.2",
+    "babel-loader": "8.2.4",
+    "babel-plugin-istanbul": "^6.1.1",
+    "cypress": "^12.7.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sonarjs": "^0.18.0",
+    "json": "11.0.0",
+    "nyc": "^15.1.0",
+    "prettier": "^2.8.4",
+    "prettier-eslint": "^15.0.1",
+    "storybook-builder-vite": "0.1.21",
+    "typescript": "^4.9.4",
+    "vite": "^2.9.13",
+    "vite-plugin-dts": "^1.7.1",
+    "vite-plugin-istanbul": "^4.0.1"
+  }
 }
diff --git a/packages/custoplayer/src/lib/components/ControlsBar.tsx b/packages/custoplayer/src/lib/components/ControlsBar.tsx
@@ -26,6 +26,7 @@ import {
   controlsBarMovementAnimation,
   controlsBarOpacityAnimation,
 } from '@root/lib/variants';
+import ProgressBars from './ProgressBars/index';
 
 function extractColor(curItem: CustoplayerItem) {
   if (
@@ -81,6 +82,12 @@ function ControlsBar() {
           exit='exit'
           data-cy='controlsBar'
         >
+          {videoValues.topProgressBar && (
+            <TopProgressBarContainer>
+              <ProgressBars onTop={true} item={videoValues.topProgressBar} />
+            </TopProgressBarContainer>
+          )}
+
           <Controls
             height='45px'
             backgroundColor={videoValues.controlsBar?.barColor}
@@ -133,4 +140,12 @@ export const ItemContainer = styled.div<{ isProgressBar: boolean }>`
   }
 `;
 
+export const TopProgressBarContainer = styled.div`
+  width: 100%;
+  height: 3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
+
 export default ControlsBar;
diff --git a/packages/custoplayer/src/lib/components/ProgressBars/ProgressBar2.tsx b/packages/custoplayer/src/lib/components/ProgressBars/ProgressBar2.tsx
@@ -59,7 +59,7 @@ const Bar2 = styled(motion.div)<{ barColor: string | undefined }>`
   display: flex;
   background-color: ${(props) => (props.barColor ? props.barColor : '#f2f2f2')};
   width: 100%;
-  height: 65%;
+  height: 1.25rem;
   justify-content: flex-start;
   position: relative;
 `;

diff --git a/packages/custoplayer/src/lib/components/ProgressBars/ProgressBar3.tsx b/packages/custoplayer/src/lib/components/ProgressBars/ProgressBar3.tsx
@@ -49,6 +49,7 @@ const ProgressBar3 = forwardRef<Ref, ProgressBarProps>((props, ref) => {
         }}
         progressColor={props.item.progressColor}
       />
+
       {values.previewTooltip && (
         <PreviewTooltips
           isHovered={props.isHovered}
@@ -68,7 +69,7 @@ const Bar3 = styled(motion.div)<{
   background-color: ${(props) =>
     props.barColor ? props.barColor : 'transparent'};
   width: 100%;
-  height: 65%;
+  height: 1.25rem;
   justify-content: flex-start;
   border-radius: 1rem;
   align-items: center;