test

ui/package.json

@@ -7,6 +7,7 @@
     "@kerberos-io/ui": "^1.76.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
+    "@syncfusion/ej2-react-calendars": "^25.1.40",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",

ui/public/locales/it/translation.json

@@ -226,4 +226,4 @@
       "remove_after_upload_enabled": "Abilita cancellazione al caricamento"
     }
   }
-}
+}

ui/public/locales/ja/translation.json

@@ -226,4 +226,4 @@
       "remove_after_upload_enabled": "Enabled delete on upload"
     }
   }
-}
+}

ui/src/config.js

@@ -9,8 +9,8 @@ const dev = {
   ENV: 'dev',
   // Comment the below lines, when using codespaces or other special DNS names (which you can't control)
   HOSTNAME: hostname,
-  API_URL: `${protocol}//${hostname}:80/api`,
-  URL: `${protocol}//${hostname}:80`,
+  API_URL: `https://demo.kerberos.io/api`,
+  URL: `https://demo.kerberos.io/`,
   WS_URL: `${websocketprotocol}//${hostname}:80/ws`,
   MODE: window['env']['mode'],
   // Uncomment, and comment the above lines, when using codespaces or other special DNS names (which you can't control)

ui/src/pages/Media/Media.jsx

@@ -12,6 +12,7 @@ import {
 } from '@kerberos-io/ui';
 import { Link, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
+import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
 import { getEvents } from '../../actions/agent';
 import config from '../../config';
 import './Media.scss';
@@ -93,6 +94,9 @@ class Media extends React.Component {
           level1={t('recordings.heading')}
           level1Link=""
         >
+          <DateTimePickerComponent placeholder="Choose a date and time">
+            {' '}
+          </DateTimePickerComponent>
           <Link to="/settings">
             <Button
               label={t('breadcrumb.configure')}

ui/src/pages/Media/Media.scss

@@ -1,3 +1,4 @@
+@import url("https://cdn.syncfusion.com/ej2/material.css");
 #media {
 
   #loader {