diff --git a/frontend/src/Helpers/Props/icons.js b/frontend/src/Helpers/Props/icons.js
index 49fbc457d..cad3ef748 100644
--- a/frontend/src/Helpers/Props/icons.js
+++ b/frontend/src/Helpers/Props/icons.js
@@ -24,6 +24,7 @@ import {
import {
faArrowCircleLeft as fasArrowCircleLeft,
faArrowCircleRight as fasArrowCircleRight,
+ faAsterisk as fasAsterisk,
faBackward as fasBackward,
faBars as fasBars,
faBolt as fasBolt,
@@ -138,6 +139,7 @@ export const EXTERNAL_LINK = fasExternalLinkAlt;
export const FATAL = fasTimesCircle;
export const FILE = farFile;
export const FILTER = fasFilter;
+export const FOOTNOTE = fasAsterisk;
export const FOLDER = farFolder;
export const FOLDER_OPEN = fasFolderOpen;
export const GROUP = farObjectGroup;
diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingModal.css b/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
index c178d82cb..51b3396dc 100644
--- a/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
@@ -16,3 +16,21 @@
margin-left: 10px;
width: 200px;
}
+
+.footNote {
+
+ color: $helpTextColor;
+ display: flex;
+
+ .icon {
+ padding: 2px;
+ margin-top: 3px;
+ margin-right: 5px;
+ }
+
+ code {
+ background-color: #f7f7f7;
+ border: 1px solid $borderColor;
+ padding: 0px 1px;
+ }
+}
diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingModal.js b/frontend/src/Settings/MediaManagement/Naming/NamingModal.js
index c841581d2..3ef7dd636 100644
--- a/frontend/src/Settings/MediaManagement/Naming/NamingModal.js
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingModal.js
@@ -1,8 +1,9 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import { sizes } from 'Helpers/Props';
+import { sizes, icons } from 'Helpers/Props';
import FieldSet from 'Components/FieldSet';
import Button from 'Components/Link/Button';
+import Icon from 'Components/Icon';
import SelectInput from 'Components/Form/SelectInput';
import TextInput from 'Components/Form/TextInput';
import Modal from 'Components/Modal/Modal';
@@ -90,12 +91,12 @@ const qualityTokens = [
const mediaInfoTokens = [
{ token: '{MediaInfo Simple}', example: 'x264 DTS' },
- { token: '{MediaInfo Full}', example: 'x264 DTS [EN+DE]' },
+ { token: '{MediaInfo Full}', example: 'x264 DTS [EN+DE]', footNote: 1 },
{ token: '{MediaInfo AudioCodec}', example: 'DTS' },
{ token: '{MediaInfo AudioChannels}', example: '5.1' },
- { token: '{MediaInfo AudioLanguages}', example: '[EN+DE]' },
- { token: '{MediaInfo SubtitleLanguages}', example: '[DE]' },
+ { token: '{MediaInfo AudioLanguages}', example: '[EN+DE]', footNote: 1 },
+ { token: '{MediaInfo SubtitleLanguages}', example: '[DE]', footNote: 1 },
{ token: '{MediaInfo VideoCodec}', example: 'x264' },
{ token: '{MediaInfo VideoBitDepth}', example: '10' },
@@ -444,7 +445,7 @@ class NamingModal extends Component {