Add conference notification

css/_font.scss

 .icon-navigate_before:before {
   content: "\e408";
 }
+.icon-navigate_next:before {
+  content: "\e409";
+}
 .icon-public:before {
     content: "\e80b";
 }

fonts/jitsi.svg

 <glyph unicode="&#xe1aa;" glyph-name="bluetooth" d="M550 328l-80 82v-162zM470 776v-162l80 82zM670 696l-184-184 184-184-244-242h-42v324l-196-196-60 60 238 238-238 238 60 60 196-196v324h42zM834 738c40-64 62-142 62-222 0-84-24-160-66-226l-50 50c26 52 42 110 42 172s-16 120-42 172zM608 512l98 98c12-30 20-64 20-98s-8-70-20-100z" />
 <glyph unicode="&#xe310;" glyph-name="headset" d="M512 982c212 0 384-172 384-384v-300c0-70-58-128-128-128h-128v342h170v86c0 166-132 298-298 298s-298-132-298-298v-86h170v-342h-128c-70 0-128 58-128 128v300c0 212 172 384 384 384z" />
 <glyph unicode="&#xe408;" glyph-name="navigate_before" d="M658 708l-196-196 196-196-60-60-256 256 256 256z" />
+<glyph unicode="&#xe409;" glyph-name="navigate_next" d="M426 768l256-256-256-256-60 60 196 196-196 196z" />
 <glyph unicode="&#xe425;" glyph-name="timer" d="M512 170c166 0 298 134 298 300s-132 298-298 298-298-132-298-298 132-300 298-300zM812 708c52-66 84-148 84-238 0-212-172-384-384-384s-384 172-384 384 172 384 384 384c90 0 174-34 240-86l60 62c22-18 42-38 60-60zM470 426v256h84v-256h-84zM640 982v-86h-256v86h256z" />
 <glyph unicode="&#xe5c4;" glyph-name="arrow_back" d="M854 554v-84h-520l238-240-60-60-342 342 342 342 60-60-238-240h520z" />
 <glyph unicode="&#xe5d2;" glyph-name="menu" d="M128 768h768v-86h-768v86zM128 470v84h768v-84h-768zM128 256v86h768v-86h-768z" />

fonts/selection.json

 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M426 256l256 256-256 256-60-60 196-196-196-196z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "navigate_next"
+        ],
+        "defaultCode": 58377,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "chevron_right, navigate_next",
+        "id": 153,
+        "order": 927,
+        "prevSize": 24,
+        "code": 58377,
+        "name": "navigate_next"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 153
+    },
     {
       "icon": {
         "paths": [
         "code": 58834,
         "name": "menu"
       },
-      "setIdx": 0,
-      "setId": 2,
-      "iconIdx": 489
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 0
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 1
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 1
+      "iconIdx": 2
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 2
+      "iconIdx": 3
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 3
+      "iconIdx": 4
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 4
+      "iconIdx": 5
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 5
+      "iconIdx": 6
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 6
+      "iconIdx": 7
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 7
+      "iconIdx": 8
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 8
+      "iconIdx": 9
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 9
+      "iconIdx": 10
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 10
+      "iconIdx": 11
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 11
+      "iconIdx": 12
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 12
+      "iconIdx": 13
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 13
+      "iconIdx": 14
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 14
+      "iconIdx": 15
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 15
+      "iconIdx": 16
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 16
+      "iconIdx": 17
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 17
+      "iconIdx": 18
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 18
+      "iconIdx": 19
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 19
+      "iconIdx": 20
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 20
+      "iconIdx": 21
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 21
+      "iconIdx": 22
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 22
+      "iconIdx": 23
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 23
+      "iconIdx": 24
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 24
+      "iconIdx": 25
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 25
+      "iconIdx": 26
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 26
+      "iconIdx": 27
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 27
+      "iconIdx": 28
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 28
+      "iconIdx": 29
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 29
+      "iconIdx": 30
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 30
+      "iconIdx": 31
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 31
+      "iconIdx": 32
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 32
+      "iconIdx": 33
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 33
+      "iconIdx": 34
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 34
+      "iconIdx": 35
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 35
+      "iconIdx": 36
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 36
+      "iconIdx": 37
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 37
+      "iconIdx": 38
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 38
+      "iconIdx": 39
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 39
+      "iconIdx": 40
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 40
+      "iconIdx": 41
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 41
+      "iconIdx": 42
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 42
+      "iconIdx": 43
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 43
+      "iconIdx": 44
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 44
+      "iconIdx": 45
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 45
+      "iconIdx": 46
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 46
+      "iconIdx": 47
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 47
+      "iconIdx": 48
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 48
+      "iconIdx": 49
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 49
+      "iconIdx": 50
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 50
+      "iconIdx": 51
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 51
+      "iconIdx": 52
     }
   ],
   "height": 1024,

lang/main.json

     "calendarSync": {
         "later": "Later",
         "next": "Upcoming",
+        "nextMeeting": "next meeting",
         "now": "Now"
     }
 }

react/features/base/font-icons/jitsi.json

 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M426 256l256 256-256 256-60-60 196-196-196-196z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "navigate_next"
+        ],
+        "defaultCode": 58377,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "chevron_right, navigate_next",
+        "id": 153,
+        "order": 927,
+        "prevSize": 24,
+        "code": 58377,
+        "name": "navigate_next"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 153
+    },
     {
       "icon": {
         "paths": [
         "code": 58834,
         "name": "menu"
       },
-      "setIdx": 0,
-      "setId": 2,
-      "iconIdx": 489
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 0
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 1
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 1
+      "iconIdx": 2
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 2
+      "iconIdx": 3
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 3
+      "iconIdx": 4
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 4
+      "iconIdx": 5
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 5
+      "iconIdx": 6
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 6
+      "iconIdx": 7
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 7
+      "iconIdx": 8
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 8
+      "iconIdx": 9
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 9
+      "iconIdx": 10
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 10
+      "iconIdx": 11
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 11
+      "iconIdx": 12
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 12
+      "iconIdx": 13
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 13
+      "iconIdx": 14
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 14
+      "iconIdx": 15
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 15
+      "iconIdx": 16
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 16
+      "iconIdx": 17
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 17
+      "iconIdx": 18
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 18
+      "iconIdx": 19
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 19
+      "iconIdx": 20
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 20
+      "iconIdx": 21
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 21
+      "iconIdx": 22
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 22
+      "iconIdx": 23
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 23
+      "iconIdx": 24
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 24
+      "iconIdx": 25
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 25
+      "iconIdx": 26
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 26
+      "iconIdx": 27
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 27
+      "iconIdx": 28
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 28
+      "iconIdx": 29
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 29
+      "iconIdx": 30
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 30
+      "iconIdx": 31
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 31
+      "iconIdx": 32
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 32
+      "iconIdx": 33
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 33
+      "iconIdx": 34
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 34
+      "iconIdx": 35
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 35
+      "iconIdx": 36
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 36
+      "iconIdx": 37
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 37
+      "iconIdx": 38
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 38
+      "iconIdx": 39
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 39
+      "iconIdx": 40
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 40
+      "iconIdx": 41
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 41
+      "iconIdx": 42
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 42
+      "iconIdx": 43
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 43
+      "iconIdx": 44
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 44
+      "iconIdx": 45
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 45
+      "iconIdx": 46
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 46
+      "iconIdx": 47
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 47
+      "iconIdx": 48
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 48
+      "iconIdx": 49
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 49
+      "iconIdx": 50
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 50
+      "iconIdx": 51
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 51
+      "iconIdx": 52
     }
   ],
   "height": 1024,

react/features/calendar-sync/components/ConferenceNotification.native.js

+// @flow
+import React, { Component } from 'react';
+import {
+    Text,
+    TouchableOpacity,
+    View
+} from 'react-native';
+import { connect } from 'react-redux';
+
+import { appNavigate } from '../../app';
+import { getURLWithoutParams } from '../../base/connection';
+import { translate } from '../../base/i18n';
+import { Icon } from '../../base/font-icons';
+import { ASPECT_RATIO_NARROW } from '../../base/responsive-ui';
+import { getLocalizedDateFormatter } from '../../base/util';
+
+import styles from './styles';
+
+const ALERT_MILLISECONDS = 5 * 60 * 1000;
+
+type Props = {
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: Function,
+
+    /**
+     * The current aspect ratio of the screen.
+     */
+    _aspectRatio: Symbol,
+
+    /**
+     * The URL of the current conference without params.
+     */
+    _currentConferenceURL: string,
+
+    /**
+     * The calendar event list.
+     */
+    _eventList: Array<Object>,
+
+    /**
+     * The translate function.
+     */
+    t: Function
+};
+
+type State = {
+
+    /**
+     * The event object to display the notification for.
+     */
+    event?: Object
+};
+
+/**
+ * Component to display a permanent badge-like notification on the
+ * conference screen when another meeting is about to start.
+ */
+class ConferenceNotification extends Component<Props, State> {
+    updateIntervalId: number;
+
+    /**
+     * Constructor of the ConferenceNotification component.
+     *
+     * @inheritdoc
+     */
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            event: undefined
+        };
+
+        this._getNotificationContentStyle
+            = this._getNotificationContentStyle.bind(this);
+        this._getNotificationPosition
+            = this._getNotificationPosition.bind(this);
+        this._maybeDisplayNotification
+            = this._maybeDisplayNotification.bind(this);
+        this._onGoToNext = this._onGoToNext.bind(this);
+    }
+
+    /**
+     * Implements React Component's componentDidMount.
+     *
+     * @inheritdoc
+     */
+    componentDidMount() {
+        this.updateIntervalId = setInterval(
+            this._maybeDisplayNotification,
+            10 * 1000
+        );
+    }
+
+    /**
+     * Implements React Component's componentWillUnmount.
+     *
+     * @inheritdoc
+     */
+    componentWillUnmount() {
+        clearTimeout(this.updateIntervalId);
+    }
+
+    /**
+     * Implements the React Components's render method.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { event } = this.state;
+        const { t } = this.props;
+
+        if (event) {
+            return (
+                <View
+                    style = { [
+                        styles.notificationContainer,
+                        this._getNotificationPosition()
+                    ] } >
+                    <View
+                        style = { this._getNotificationContentStyle() }>
+                        <TouchableOpacity
+                            onPress = { this._onGoToNext } >
+                            <View style = { styles.touchableView }>
+                                <View
+                                    style = {
+                                        styles.notificationTextContainer
+                                    }>
+                                    <Text style = { styles.notificationText }>
+                                        { t('calendarSync.nextMeeting') }
+                                    </Text>
+                                    <Text style = { styles.notificationText }>
+                                        {
+                                            getLocalizedDateFormatter(
+                                                event.startDate
+                                            ).fromNow()
+                                        }
+                                    </Text>
+                                </View>
+                                <View
+                                    style = {
+                                        styles.notificationIconContainer
+                                    }>
+                                    <Icon
+                                        name = 'navigate_next'
+                                        style = { styles.notificationIcon } />
+                                </View>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            );
+        }
+
+        return null;
+    }
+
+    _getNotificationContentStyle: () => Array<Object>
+
+    /**
+     * Decides the color of the notification and some additional
+     * styles based on notificationPosition.
+     *
+     * @private
+     * @returns {Array<Object>}
+     */
+    _getNotificationContentStyle() {
+        const { event } = this.state;
+        const { _aspectRatio } = this.props;
+        const now = Date.now();
+        const style = [
+            styles.notificationContent
+        ];
+
+        if (event && event.startDate < now && event.endDate > now) {
+            style.push(styles.notificationContentPast);
+        } else {
+            style.push(styles.notificationContentNext);
+        }
+
+        if (_aspectRatio === ASPECT_RATIO_NARROW) {
+            style.push(styles.notificationContentSide);
+        } else {
+            style.push(styles.notificationContentTop);
+        }
+
+        return style;
+    }
+
+    _getNotificationPosition: () => Object;
+
+    /**
+     * Decides the position of the notification.
+     *
+     * @private
+     * @returns {Object}
+     */
+    _getNotificationPosition() {
+        const { _aspectRatio } = this.props;
+
+        if (_aspectRatio === ASPECT_RATIO_NARROW) {
+            return styles.notificationContainerSide;
+        }
+
+        return styles.notificationContainerTop;
+    }
+
+    _maybeDisplayNotification: () => void;
+
+    /**
+     * Periodically checks if there is an event in the calendar for which we
+     * need to show a notification.
+     *
+     * @private
+     * @returns {void}
+     */
+    _maybeDisplayNotification() {
+        const { _currentConferenceURL, _eventList } = this.props;
+        let eventToShow;
+
+        if (_eventList && _eventList.length) {
+            const now = Date.now();
+
+            for (const event of _eventList) {
+                if (event.url !== _currentConferenceURL) {
+                    if ((!eventToShow
+                        && event.startDate > now
+                        && event.startDate < now + ALERT_MILLISECONDS)
+                        || (event.startDate < now && event.endDate > now)
+                    ) {
+                        eventToShow = event;
+                    }
+                }
+            }
+        }
+
+        this.setState({
+            event: eventToShow
+        });
+    }
+
+    _onGoToNext: () => void;
+
+    /**
+     * Opens the meeting URL that the notification shows.
+     *
+     * @private
+     * @param {string} url - The URL to open.
+     * @returns {void}
+     */
+    _onGoToNext() {
+        const { event } = this.state;
+
+        if (event && event.url) {
+            this.props.dispatch(appNavigate(event.url));
+        }
+    }
+
+}
+
+/**
+ * Maps redux state to component props.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {{
+ *      _aspectRatio: Symbol,
+ *      _currentConferenceURL: string,
+ *      _eventList: Array
+ * }}
+ */
+export function _mapStateToProps(state: Object) {
+    const { locationURL } = state['features/base/connection'];
+
+    return {
+        _aspectRatio: state['features/base/responsive-ui'].aspectRatio,
+        _currentConferenceURL:
+            locationURL ? getURLWithoutParams(locationURL)._url : '',
+        _eventList: state['features/calendar-sync'].events
+    };
+}
+
+export default translate(connect(_mapStateToProps)(ConferenceNotification));

react/features/calendar-sync/components/index.js

 export { default as MeetingList } from './MeetingList';
+export { default as ConferenceNotification } from './ConferenceNotification';

react/features/calendar-sync/components/styles.js

 import { createStyleSheet } from '../../base/styles';
 
 const AVATAR_OPACITY = 0.4;
-
 const AVATAR_SIZE = 65;
-
+const NOTIFICATION_SIZE = 55;
 const OVERLAY_FONT_COLOR = 'rgba(255, 255, 255, 0.6)';
 
 export const UNDERLAY_COLOR = 'rgba(255, 255, 255, 0.2)';
         textAlign: 'center'
     },
 
+    /**
+     * Style for the actual notification content.
+     */
+    notificationContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        position: 'absolute'
+    },
+
+    /**
+     * Additional style for the container when the notification is displayed
+     * on the side (narrow view).
+     */
+    notificationContainerSide: {
+        top: 100
+    },
+
+    /**
+     * Additional style for the container when the notification is displayed
+     * on the top (wide view).
+     */
+    notificationContainerTop: {
+        justifyContent: 'center',
+        left: 0,
+        right: 0,
+        top: 0
+    },
+
+    /**
+     * The top level container of the notification.
+     */
+    notificationContent: {
+        alignSelf: 'flex-start',
+        flexDirection: 'row',
+        height: NOTIFICATION_SIZE,
+        justifyContent: 'center',
+        paddingHorizontal: 10
+    },
+
+    /**
+     * Color for upcoming meeting notification.
+     */
+    notificationContentNext: {
+        backgroundColor: '#eeb231'
+    },
+
+    /**
+     * Color for already ongoing meeting notifications.
+     */
+    notificationContentPast: {
+        backgroundColor: 'red'
+    },
+
+    /**
+     * Additional style for the content when the notification is displayed
+     * on the side (narrow view).
+     */
+    notificationContentSide: {
+        borderBottomRightRadius: NOTIFICATION_SIZE,
+        borderTopRightRadius: NOTIFICATION_SIZE
+    },
+
+    /**
+     * Additional style for the content when the notification is displayed
+     * on the top (wide view).
+     */
+    notificationContentTop: {
+        borderBottomLeftRadius: NOTIFICATION_SIZE / 2,
+        borderBottomRightRadius: NOTIFICATION_SIZE / 2,
+        paddingHorizontal: 20
+    },
+
+    /**
+     * The icon of the notification.
+     */
+    notificationIcon: {
+        color: 'white',
+        fontSize: 25
+    },
+
+    notificationIconContainer: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        height: NOTIFICATION_SIZE,
+        justifyContent: 'center'
+    },
+
+    notificationText: {
+        color: 'white',
+        fontSize: 13
+    },
+
+    notificationTextContainer: {
+        flexDirection: 'column',
+        height: NOTIFICATION_SIZE,
+        justifyContent: 'center'
+    },
+
     /**
      * The top level container style of the list.
      */
         color: OVERLAY_FONT_COLOR,
         fontSize: 14,
         fontWeight: 'normal'
+    },
+
+    touchableView: {
+        flexDirection: 'row'
     }
 });

react/features/calendar-sync/middleware.js

                 }
             }
 
+            // TEST events to check notification popup.
+            // TODO: Remove this before a PR.
+            eventList.push({
+                endDate: Date.now() + (60 * 60 * 1000),
+                id: -1,
+                startDate: Date.now() + (80 * 1000),
+                title: 'ShipIt 41',
+                url: 'https://meet.jit.si/shipit41'
+            });
+
+            eventList.push({
+                endDate: Date.now() + (2 * 60 * 60 * 1000),
+                id: -2,
+                startDate: Date.now() + (60 * 60 * 1000),
+                title: 'ShipIt 41 demo',
+                url: 'https://meet.jit.si/shipit41'
+            });
+
             store.dispatch(updateCalendarEntryList(eventList.sort((a, b) =>
                 a.startDate - b.startDate
             ).slice(0, MAX_LIST_LENGTH)));

react/features/conference/components/Conference.native.js

 import { CalleeInfoContainer } from '../../base/jwt';
 import { Container, LoadingIndicator, TintedView } from '../../base/react';
 import { createDesiredLocalTracks } from '../../base/tracks';
+import { ConferenceNotification } from '../../calendar-sync';
 import { Filmstrip } from '../../filmstrip';
 import { LargeVideo } from '../../large-video';
 import { setToolboxVisible, Toolbox } from '../../toolbox';
                     <Filmstrip />
                 </View>
 
+                <ConferenceNotification />
+
                 {/*
                   * The dialogs are in the topmost stacking layers.
                   */

react/features/recent-list/components/AbstractRecentList.js

     _recentList: Array<Object>,
 
     /**
-     * The redux store's {@code dispatch} function.
+     * Indicates if the list is disabled or not.
      */
-    dispatch: Dispatch<*>,
+    disabled: boolean,
 
     /**
-     * Whether {@code AbstractRecentList} is enabled.
+     * The redux store's {@code dispatch} function.
      */
-    enabled: boolean
+    dispatch: Dispatch<*>
 };
 
 /**
      * @returns {void}
      */
     _onJoin(room) {
-        const { dispatch, enabled } = this.props;
+        const { dispatch, disabled } = this.props;
 
-        enabled && room && dispatch(appNavigate(room));
+        !disabled && room && dispatch(appNavigate(room));
     }
 
     /**

react/features/recent-list/components/RecentList.native.js

      * @returns {ReactElement}
      */
     render() {
-        const { enabled, _recentList } = this.props;
+        const { disabled, _recentList } = this.props;
 
         if (!_recentList) {
             return null;
             <SafeAreaView
                 style = { [
                     styles.container,
-                    enabled ? null : styles.containerDisabled
+                    disabled ? styles.containerDisabled : null
                 ] }>
                 <ListView
                     dataSource = { listViewDataSource }