From d948b36c3ffb9ea124d469a8f3b7edcef4b7b9c2 Mon Sep 17 00:00:00 2001
From: Lucien Blunk-Lallet <lucien.blunk.lallet@gmail.com>
Date: Wed, 17 Apr 2019 23:33:36 +0200
Subject: [PATCH] fix: Possible dark video background issue fix (#70)

---
 App/Screens/Home/SmokeVideo/SmokeVideo.js | 37 +++++++++++++++--------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/App/Screens/Home/SmokeVideo/SmokeVideo.js b/App/Screens/Home/SmokeVideo/SmokeVideo.js
index c940a473..a696a30f 100644
--- a/App/Screens/Home/SmokeVideo/SmokeVideo.js
+++ b/App/Screens/Home/SmokeVideo/SmokeVideo.js
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0
 
 import React, { Component } from 'react';
-import { Dimensions, StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 import { inject, observer } from 'mobx-react';
 import { Video } from 'expo';
 
@@ -16,26 +16,39 @@ export class SmokeVideo extends Component {
       stores: { cigarettes }
     } = this.props;
 
-    if (cigarettes <= 1) return { opacity: 0.2 };
-    if (cigarettes < 5) return { opacity: 0.5 };
-    if (cigarettes < 15) return { opacity: 0.7 };
-    return { opacity: 1 };
+    if (cigarettes <= 1) return { backgroundColor: '#FFFFFFCC' };
+    if (cigarettes < 5) return { backgroundColor: '#FFFFFFAA' };
+    if (cigarettes < 15) return { backgroundColor: '#FFFFFF22' };
+    return { backgroundColor: '#FFFFFF00' };
   };
 
   render () {
     return (
-      <Video
-        isLooping
-        resizeMode='cover'
-        shouldPlay
-        source={smokeVideo}
-        style={[styles.video, this.getVideoStyle()]}
-      />
+      <View style={styles.container}>
+        <View style={[styles.overlay, this.getVideoStyle()]} />
+        <Video
+          isLooping
+          resizeMode='cover'
+          shouldPlay
+          source={smokeVideo}
+          style={styles.video}
+        />
+      </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  container: {
+    bottom: 0,
+    height: Dimensions.get('screen').height,
+    position: 'absolute',
+    right: 0,
+    width: Dimensions.get('screen').width
+  },
+  overlay: {
+    flex: 1
+  },
   video: {
     bottom: 0,
     height: Dimensions.get('screen').height,