fix(device): improve android message and ios safari detection

Author: Thorn Walli

src/components/atoms/InfoBox.vue

@@ -19,10 +19,6 @@ import RichText from '@/components/atoms/RichText';
 export default {
   components: { TextFade, RichText },
   props: {
-    error: {
-      type: Boolean,
-      default: false
-    },
     fade: {
       type: Boolean,
       default: false
@@ -47,8 +43,7 @@ export default {
   computed: {
     styleClasses () {
       return {
-        [`info-box--${this.styleType}`]: this.styleType,
-        'info-box--error': this.error
+        [`info-box--${this.styleType}`]: this.styleType
       };
     }
   }

src/components/molecules/Upload.vue

@@ -65,10 +65,6 @@ export default {
       type: String,
       default: 'Max. video length: %length% seconds.'
     },
-    androidExperimentalText: {
-      type: String,
-      default: 'Android support is experimental. In case of problems, switch to another device.'
-    },
     errorMessages: {
       type: Object,
       default () {
@@ -132,9 +128,6 @@ export default {
     const text = [
       this.maxLengthText.replace('%length%', this.getMaxLength())
     ];
-    if (this.$isDeviceAndroid()) {
-      text.unshift(this.androidExperimentalText);
-    }
     this.infoText = text.join('<br>');
   },
 

src/components/molecules/UploadModifier.vue

@@ -139,8 +139,7 @@ export default {
       default () {
         return {
           [ERROR]: {
-            error: true,
-            styleType: null,
+            styleType: 'error',
             headline: 'Conversion failed.',
             text: 'Sorry! Please, try another browser or device.',
             foot: null

src/components/organisms/AudioModifier.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="organism-audio-modifier">
+    <transition name="fade" mode="out-in">
+      <lost-container v-if="isAndroid" class="audio-modifier__device-notification" direction="column">
+        <info-box v-bind="deviceNotification" style-type="error" />
+      </lost-container>
+    </transition>
     <upload-modifier class="audio-modifier__upload" v-bind="uploadModifier" @reset="onReset" @ready="onReady" @info="onChangeInfo" />
     <lost-container v-if="!complete" class="audio-modifier" direction="column">
       <transition name="fade" mode="out-in">
@@ -15,14 +20,16 @@ import UploadModifier from '@/components/molecules/UploadModifier';
 import InfoList from '@/components/molecules/InfoList';
 import InfoSlider from '@/components/molecules/InfoSlider';
 import { CONVERSION_COMPLETE, CONVERSION_START } from '@/classes/FFMPEGWorker';
-import LostContainer from '../layouts/LostContainer';
+import LostContainer from '@/components/layouts/LostContainer';
+import InfoBox from '@/components/atoms/InfoBox';
 
 export default {
   components: {
     LostContainer,
     UploadModifier,
     InfoList,
-    InfoSlider
+    InfoSlider,
+    InfoBox
   },
 
   props: {
@@ -48,11 +55,25 @@ export default {
 
   data () {
     return {
+      isAndroid: false,
       complete: false,
       processing: false
     };
   },
 
+  computed: {
+    deviceNotification () {
+      return {
+        headline: null,
+        text: 'Android support is experimental. <br>In case of problems, switch to another device.'
+      };
+    }
+  },
+
+  mounted () {
+    this.isAndroid = this.$isDeviceAndroid();
+  },
+
   methods: {
     onChangeInfo (info) {
       switch (info) {
@@ -75,13 +96,35 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-div {
+.organism-audio-modifier {
   & ul {
     padding: 0;
     margin: 0;
     list-style: none;
   }
 
+  & .audio-modifier__device-notification {
+    lost-column: 12/12;
+    lost-offset: 0/12;
+    margin-top: -20px;
+    margin-bottom: 40px;
+
+    @media (--sm) {
+      lost-column: 10/12;
+      lost-offset: 1/12;
+    }
+
+    @media (--md) {
+      lost-column: 8/12;
+      lost-offset: 2/12;
+    }
+
+    @media (--lg) {
+      lost-column: 6/12;
+      lost-offset: 3/12;
+    }
+  }
+
   & .audio-modifier__upload + * {
     margin-top: calc(40 / 320 * 100vw);
 

src/modules/device-detection/plugin.js

@@ -5,8 +5,17 @@ export function isSupportedBrowser (browserSupport) {
 
 export default (context, inject) => {
   inject('isDeviceIos', () => isSupportedBrowser(<%= options.detections.ios %>));
-  inject('isBrowserSafari', () => navigator.userAgent.toLowerCase().indexOf('safari/') > -1 && navigator.userAgent.toLowerCase().indexOf('fxios/') < 0);
-
-  // inject('isDeviceAndroid', () => isSupportedBrowser(<%= options.detections.android %>));
+  inject('isBrowserSafari', () => isBrowserSafari());
   inject('isDeviceAndroid', () => global.navigator.userAgent.toLocaleLowerCase().includes('android'));
 }
+
+function isBrowserSafari(){
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.indexOf('safari/') > -1 &&
+  userAgent.indexOf('fxios/') < 0 &&
+  userAgent.indexOf('edgios/') < 0 &&
+  userAgent.indexOf('crios/') < 0 &&
+  userAgent.indexOf('opios/') < 0 &&
+  userAgent.indexOf('puffin/') < 0
+}
+