diff --git a/ui/src/i18n/en.json b/ui/src/i18n/en.json index dcaa41d5..82ad5ed7 100644 --- a/ui/src/i18n/en.json +++ b/ui/src/i18n/en.json @@ -1,3 +1,4 @@ + { "languageName": "English", "resources": { @@ -189,9 +190,11 @@ "url": "URL", "description": "Description", "contents": "Contents", - "expiresAt": "Expires at", - "lastVisitedAt": "Last Visited at", + "expiresAt": "Expires", + "lastVisitedAt": "Last Visited", "visitCount": "Visits", + "format": "Format", + "maxBitRate": "Max. Bit Rate", "updatedAt": "Updated at", "createdAt": "Created at" }, diff --git a/ui/src/share/ShareList.js b/ui/src/share/ShareList.js index 3d1efa66..ab90bfa6 100644 --- a/ui/src/share/ShareList.js +++ b/ui/src/share/ShareList.js @@ -3,12 +3,14 @@ import { FunctionField, List, NumberField, + SimpleList, TextField, + useTranslate, } from 'react-admin' import React from 'react' import { DateField, QualityInfo } from '../common' import { shareUrl } from '../utils' -import { Link } from '@material-ui/core' +import { Link, useMediaQuery } from '@material-ui/core' import config from '../config' export const FormatInfo = ({ record, size }) => { @@ -19,37 +21,51 @@ export const FormatInfo = ({ record, size }) => { } const ShareList = (props) => { + const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) + const translate = useTranslate() return ( - - ( - { - e.stopPropagation() - }} - > - {r.id} - + {isXsmall ? ( + r.description || r.contents || r.id} + secondaryText={(r) => ( + <> + {translate('resources.share.fields.expiresAt')}:{' '} + + )} /> - - - - - - - - + ) : ( + + ( + { + e.stopPropagation() + }} + > + {r.id} + + )} + /> + + + + + + + + + )} ) }