⬛ - video player now has Linear Gradient

StreamAble-Team · Dec 11, 2022 · 58e4542 · 58e4542
1 parent 1c70a54
commit 58e4542
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "expo-device": "~5.0.0",
     "expo-font": "~11.0.1",
     "expo-keep-awake": "~11.0.1",
+    "expo-linear-gradient": "~12.0.1",
     "expo-linking": "~3.2.3",
     "expo-navigation-bar": "~2.0.1",
     "expo-random": "~13.0.0",

diff --git a/src/components/Player/Controls/Controls.styles.js b/src/components/Player/Controls/Controls.styles.js
@@ -1,3 +1,4 @@
+import { LinearGradient } from "expo-linear-gradient";
 import styled from "styled-components/native";
 
 export const Container = styled.View`
@@ -9,7 +10,11 @@ export const Container = styled.View`
   opacity: ${({ hideControls }) => (!hideControls ? 1 : 0)};
 `;
 
-export const WrapperWithBg = styled.View`
+export const WrapperWithBg = styled(LinearGradient).attrs(() => ({
+  colors: ["rgba(0, 0, 0, 0.05)", "rgba(0, 0, 0, 0.45)"],
+  start: { x: 0, y: 0 },
+  end: { x: 0, y: 1 },
+}))`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -28,12 +33,17 @@ export const WrapperFlex = styled.View`
   margin-top: 10px;
 `;
 
-export const GoBackWrapper = styled.View`
+export const GoBackWrapper = styled(LinearGradient).attrs(() => ({
+  colors: ["rgba(0, 0, 0, 0.05)", "rgba(0, 0, 0, 0.45)"],
+  start: { x: 0, y: 1 },
+  end: { x: 0, y: 0 },
+}))`
   position: absolute;
   top: 0;
   left: 0;
-  margin: 15px;
+  padding: 15px;
   z-index: 10;
+  width: 100%;
 `;
 
 export const FlexBox = styled.View`

diff --git a/src/components/Player/Controls/PlayPause/PlayPause.styles.js b/src/components/Player/Controls/PlayPause/PlayPause.styles.js
@@ -6,7 +6,7 @@ export const CanPressIcon = styled.TouchableOpacity``;
 export const PlayIcon = styled(IconItem).attrs({
   name: "play",
 })`
-  margin: 0 130px;
+  margin: 0 75px;
 `;
 
 export const PauseIcon = styled(IconItem).attrs({

diff --git a/src/components/Player/Controls/index.js b/src/components/Player/Controls/index.js
@@ -10,6 +10,7 @@ import {
   EpisodeTitle,
   EpisodeNumber,
   FlexBox,
+  WrapperWithBgTop,
 } from "./Controls.styles";
 import { IconItem, PressableIcon } from "../styles";
 import { useNavigation } from "@react-navigation/native";

diff --git a/yarn.lock b/yarn.lock
@@ -4506,6 +4506,11 @@ expo-keep-awake@~11.0.1:
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-11.0.1.tgz#ee354465892a94040ffe09901b85b469e7d54fb3"
   integrity sha512-44ZjgLE4lnce2d40Pv8xsjMVc6R5GvgHOwZfkLYtGmgYG9TYrEJeEj5UfSeweXPL3pBFhXKfFU8xpGYMaHdP0A==
 
+expo-linear-gradient@~12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.0.1.tgz#452f793b0463ddf313aad431552f23acc85f5d64"
+  integrity sha512-TMl/wBTVQOliL4S3DS5Aa3UFfVySr0mdJEHLG6kfBdMCLkr+tfLI2rGyJ+scS7xgMsvhTIaurhf1+Z0sL3aLCg==
+
 expo-linking@~3.2.0, expo-linking@~3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/expo-linking/-/expo-linking-3.2.3.tgz#7b493a7fea2aadafc88a42e2fc6a5a4ba6d47df9"