Video player: Playback status and handle Map to time (#214)

* Add isPlaying status and handle map to simulation time (no playback controls)

* Shorten info string slightly

* Add variable for hiding playback

Author: WeirdRubberDuck

public/locales/en/components.json

@@ -192,7 +192,8 @@
       },
       "info-box": {
         "description": "Properties for controlling video playback."
-      }
+      },
+      "mapped-to-time-info": "Playback is mapped to simulation time."
     }
   },
   "qrcode": {

src/components/PropertyOwner/Custom/VideoPlayer/VideoPlayer.tsx

@@ -5,6 +5,7 @@ import {
   Grid,
   Group,
   MantineStyleProps,
+  Paper,
   Text,
   ThemeIcon,
   Tooltip
@@ -22,8 +23,11 @@ import {
   RepeatOffIcon,
   ReplayIcon,
   SoundIcon,
-  SoundOffIcon
+  SoundOffIcon,
+  TimeIcon
 } from '@/icons/icons';
+import styles from '@/theme/global.module.css';
+import { IconSize } from '@/types/enums';
 import { Uri } from '@/types/types';
 
 interface Props extends MantineStyleProps {
@@ -55,10 +59,30 @@ export function VideoPlayer({ uri, ...styleProps }: Props) {
     playAudioUri
   );
 
+  const [isPlaying] = useProperty('BoolProperty', `${uri}.IsPlaying`);
+  const [startTime] = useProperty('StringProperty', `${uri}.StartTime`);
+  const [endTime] = useProperty('StringProperty', `${uri}.EndTime`);
+
   if (!propertyOwner) {
     throw Error(`No property owner found for uri: ${uri}`);
   }
 
+  const shouldHidePlaybackControls = Boolean(startTime) || Boolean(endTime);
+
+  if (shouldHidePlaybackControls) {
+    // This video player is mapped to time
+    return (
+      <Paper ml={'xs'} p={'xs'}>
+        <Group wrap={'nowrap'} gap={'xs'}>
+          <ThemeIcon variant={'subtle'} size={'xs'}>
+            <TimeIcon size={IconSize.xs} />
+          </ThemeIcon>
+          <Text size={'sm'}>{t('mapped-to-time-info')}</Text>
+        </Group>
+      </Paper>
+    );
+  }
+
   // Data for the different properties that the controls represent, to show in the
   // info box
   const propertyData = [
@@ -76,24 +100,17 @@ export function VideoPlayer({ uri, ...styleProps }: Props) {
   return (
     <Group pl={'xs'} wrap={'nowrap'} {...styleProps}>
       <Group gap={'xs'} py={'xs'}>
-        <ActionIcon.Group>
-          <Tooltip label={t('play-button.tooltip')}>
-            <ActionIcon
-              onClick={() => triggerPlay(null)}
-              aria-label={t('play-button.aria-label')}
-            >
-              <PlayIcon />
-            </ActionIcon>
-          </Tooltip>
-          <Tooltip label={t('pause-button.tooltip')}>
-            <ActionIcon
-              onClick={() => triggerPause(null)}
-              aria-label={t('pause-button.aria-label')}
-            >
-              <PauseIcon />
-            </ActionIcon>
-          </Tooltip>
-        </ActionIcon.Group>
+        <Tooltip label={isPlaying ? t('pause-button.tooltip') : t('play-button.tooltip')}>
+          <ActionIcon
+            variant={isPlaying ? 'filled' : 'default'}
+            onClick={() => (isPlaying ? triggerPause(null) : triggerPlay(null))}
+            aria-label={
+              isPlaying ? t('pause-button.aria-label') : t('play-button.aria-label')
+            }
+          >
+            {isPlaying ? <PauseIcon className={styles.blinking} /> : <PlayIcon />}
+          </ActionIcon>
+        </Tooltip>
         <Tooltip label={t('restart-button.tooltip')}>
           <ActionIcon
             onClick={() => triggerGoToStart(null)}

src/icons/icons.tsx

@@ -27,7 +27,7 @@ export {
 export { GoBrowser as BrowserIcon } from 'react-icons/go';
 export { GoMoveToEnd as GoToEnd, GoMoveToStart as GoToStart } from 'react-icons/go';
 export { ImSphere as GridSphereIcon } from 'react-icons/im';
-export { IoMdGlobe as GlobeIcon } from 'react-icons/io';
+export { IoMdGlobe as GlobeIcon, IoMdTime as TimeIcon } from 'react-icons/io';
 export {
   IoInformationCircleOutline as InformationCircleOutlineIcon,
   IoInformation as InformationIcon,