Show media links

2 files changed, 19 insertions, 0 deletions

diff --git a/modern/src/common/attributes/usePositionAttributes.js b/modern/src/common/attributes/usePositionAttributes.js
index 1eb9d067..1919b862 100644
--- a/modern/src/common/attributes/usePositionAttributes.js
+++ b/modern/src/common/attributes/usePositionAttributes.js
@@ -340,4 +340,16 @@ export default (t) => useMemo(() => ({
     name: t('attributeColor'),
     type: 'string',
   },
+  image: {
+    name: t('positionImage'),
+    type: 'string',
+  },
+  video: {
+    name: t('positionVideo'),
+    type: 'string',
+  },
+  audio: {
+    name: t('positionAudio'),
+    type: 'string',
+  },
 }), [t]);
diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js
index 7255c888..6dd1f50d 100644
--- a/modern/src/common/components/PositionValue.js
+++ b/modern/src/common/components/PositionValue.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Link } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import {
@@ -14,6 +15,8 @@ const PositionValue = ({ position, property, attribute }) => {
 
   const admin = useAdministrator();
 
+  const device = useSelector((state) => state.devices.items[position.deviceId]);
+
   const key = property || attribute;
   const value = property ? position[property] : position.attributes[attribute];
 
@@ -59,6 +62,10 @@ const PositionValue = ({ position, property, attribute }) => {
   };
 
   switch (key) {
+    case 'image':
+    case 'video':
+    case 'audio':
+      return (<Link href={`/api/media/${device.uniqueId}/${value}`} target="_blank">{value}</Link>);
     case 'totalDistance':
     case 'hours':
       return (