Playing Video

MengTo · May 14, 2019 · 6b03f5f · 6b03f5f
1 parent f2cecef
commit 6b03f5f
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 2 deletions.
diff --git a/components/Icons.js b/components/Icons.js
@@ -13,3 +13,14 @@ export const NotificationIcon = props => (
     </Defs>
   </Svg>
 );
+
+export const PlayIcon = props => (
+  <Svg height={38.15} width={38.15} {...props}>
+    <Path
+      opacity={1}
+      d="M8.153 14.585c-1.73-1.703-.825-4.649 1.563-5.087l19.148-3.516c2.072-.38 3.88 1.436 3.49 3.506L28.8 28.364c-.444 2.36-3.343 3.267-5.053 1.582L8.153 14.586z"
+      fill="#33CEFF"
+      transform="rotate(45 19.075 19.075)"
+    />
+  </Svg>
+);
diff --git a/navigator/TabNavigator.js b/navigator/TabNavigator.js
@@ -8,14 +8,16 @@ import SectionScreen from "../screens/SectionScreen";
 import { Icon } from "expo";
 import CoursesScreen from "../screens/CoursesScreen";
 import ProjectsScreen from "../screens/ProjectsScreen";
+import VideoScreen from "../screens/VideoScreen";
 
 const activeColor = "#4775f2";
 const inactiveColor = "#b8bece";
 
 const HomeStack = createStackNavigator(
   {
     Home: HomeScreen,
-    Section: SectionScreen
+    Section: SectionScreen,
+    Video: VideoScreen
   },
   {
     mode: "modal"
@@ -26,7 +28,7 @@ HomeStack.navigationOptions = ({ navigation }) => {
   var tabBarVisible = true;
   const routeName = navigation.state.routes[navigation.state.index].routeName;
 
-  if (routeName == "Section") {
+  if (routeName == "Section" || routeName == "Video") {
     tabBarVisible = false;
   }
 

diff --git a/screens/SectionScreen.js b/screens/SectionScreen.js
@@ -9,6 +9,7 @@ import {
 } from "react-native";
 import { Icon } from "expo";
 import Markdown from "react-native-showdown";
+import { PlayIcon } from "../components/Icons";
 
 class SectionScreen extends React.Component {
   static navigationOptions = {
@@ -33,6 +34,18 @@ class SectionScreen extends React.Component {
           <StatusBar hidden />
           <Cover>
             <Image source={{ uri: section.image.url }} />
+            <PlayWrapper>
+              <TouchableOpacity
+                underlayColor="transparent"
+                onPress={() => {
+                  this.props.navigation.navigate("Video");
+                }}
+              >
+                <PlayView>
+                  <PlayIcon style={{ marginLeft: -10 }} />
+                </PlayView>
+              </TouchableOpacity>
+            </PlayWrapper>
             <Wrapper>
               <Logo source={{ uri: section.logo.url }} />
               <Subtitle>{section.subtitle}</Subtitle>
@@ -212,3 +225,20 @@ const Subtitle = styled.Text`
   margin-left: 5px;
   text-transform: uppercase;
 `;
+
+const PlayWrapper = styled.View`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -40px;
+  margin-left: -40px;
+`;
+
+const PlayView = styled.View`
+  width: 80px;
+  height: 80px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 40px;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/screens/VideoScreen.js b/screens/VideoScreen.js
@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import { Video, Icon } from "expo";
+import { TouchableOpacity, Dimensions } from "react-native";
+
+let screenWidth = Dimensions.get("window").width;
+let screenHeight = Dimensions.get("window").height;
+
+class VideoScreen extends React.Component {
+  static navigationOptions = {
+    header: null
+  };
+
+  render() {
+    return (
+      <Container>
+        <Video
+          source={{
+            uri:
+              "https://player.vimeo.com/external/281472837.hd.mp4?s=c78b611b5055e373c69b6dd7674e2051128bc7b8&profile_id=175"
+          }}
+          shouldPlay
+          useNativeControls={true}
+          resizeMode="cover"
+          style={{ width: screenWidth, height: 210 }}
+        />
+        <CloseView>
+          <TouchableOpacity
+            onPress={() => {
+              this.props.navigation.goBack();
+            }}
+            style={{ padding: 20 }}
+          >
+            <Icon.Ionicons name="ios-close" size={44} color="white" />
+          </TouchableOpacity>
+        </CloseView>
+      </Container>
+    );
+  }
+}
+
+export default VideoScreen;
+
+const Container = styled.View`
+  flex: 1;
+  background: black;
+  align-items: center;
+  justify-content: center;
+`;
+
+const CloseView = styled.View`
+  position: absolute;
+  top: 0px;
+  right: 12px;
+`;