Merge pull request #4535 from davidangel/tag-whitelist

Add "AllowedTags" option to parental controls (updated)

CONTRIBUTORS.md

@@ -83,6 +83,8 @@
 - [Chris-Codes-It](https://github.com/Chris-Codes-It)
 - [Vedant](https://github.com/viktory36)
 - [GeorgeH005](https://github.com/GeorgeH005)
+- [JPUC1143](https://github.com/Jpuc1143)
+- [David Angel](https://github.com/davidangel)
 
 ## Emby Contributors
 

src/apps/dashboard/routes/users/parentalcontrol.tsx

@@ -6,7 +6,7 @@ import escapeHTML from 'escape-html';
 import globalize from '../../../../scripts/globalize';
 import LibraryMenu from '../../../../scripts/libraryMenu';
 import AccessScheduleList from '../../../../components/dashboard/users/AccessScheduleList';
-import BlockedTagList from '../../../../components/dashboard/users/BlockedTagList';
+import TagList from '../../../../components/dashboard/users/TagList';
 import ButtonElement from '../../../../elements/ButtonElement';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
@@ -16,6 +16,8 @@ import { getParameterByName } from '../../../../utils/url';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import SelectElement from '../../../../elements/SelectElement';
 import Page from '../../../../components/Page';
+import prompt from '../../../../components/prompt/prompt';
+import ServerConnections from 'components/ServerConnections';
 
 type UnratedItem = {
     name: string;
@@ -23,12 +25,44 @@ type UnratedItem = {
     checkedAttribute: string
 };
 
+function handleSaveUser(
+    page: HTMLDivElement,
+    getSchedulesFromPage: () => AccessSchedule[],
+    getAllowedTagsFromPage: () => string[],
+    getBlockedTagsFromPage: () => string[],
+    onSaveComplete: () => void
+) {
+    return (user: UserDto) => {
+        const userId = user.Id;
+        const userPolicy = user.Policy;
+        if (!userId || !userPolicy) {
+            throw new Error('Unexpected null user id or policy');
+        }
+
+        const parentalRating = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value, 10);
+        userPolicy.MaxParentalRating = Number.isNaN(parentalRating) ? null : parentalRating;
+        userPolicy.BlockUnratedItems = Array.prototype.filter
+            .call(page.querySelectorAll('.chkUnratedItem'), i => i.checked)
+            .map(i => i.getAttribute('data-itemtype'));
+        userPolicy.AccessSchedules = getSchedulesFromPage();
+        userPolicy.AllowedTags = getAllowedTagsFromPage();
+        userPolicy.BlockedTags = getBlockedTagsFromPage();
+        ServerConnections.getCurrentApiClientAsync()
+            .then(apiClient => apiClient.updateUserPolicy(userId, userPolicy))
+            .then(() => onSaveComplete())
+            .catch(err => {
+                console.error('[userparentalcontrol] failed to update user policy', err);
+            });
+    };
+}
+
 const UserParentalControl: FunctionComponent = () => {
     const [ userName, setUserName ] = useState('');
     const [ parentalRatings, setParentalRatings ] = useState<ParentalRating[]>([]);
     const [ unratedItems, setUnratedItems ] = useState<UnratedItem[]>([]);
     const [ accessSchedules, setAccessSchedules ] = useState<AccessSchedule[]>([]);
-    const [ blockedTags, setBlockedTags ] = useState([]);
+    const [ allowedTags, setAllowedTags ] = useState<string[]>([]);
+    const [ blockedTags, setBlockedTags ] = useState<string[]>([]);
 
     const element = useRef<HTMLDivElement>(null);
 
@@ -106,7 +140,28 @@ const UserParentalControl: FunctionComponent = () => {
         blockUnratedItems.dispatchEvent(new CustomEvent('create'));
     }, []);
 
-    const loadBlockedTags = useCallback((tags) => {
+    const loadAllowedTags = useCallback((tags: string[]) => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('Unexpected null reference');
+            return;
+        }
+
+        setAllowedTags(tags);
+
+        const allowedTagsElem = page.querySelector('.allowedTags') as HTMLDivElement;
+
+        for (const btnDeleteTag of allowedTagsElem.querySelectorAll('.btnDeleteTag')) {
+            btnDeleteTag.addEventListener('click', function () {
+                const tag = btnDeleteTag.getAttribute('data-tag');
+                const newTags = tags.filter(t => t !== tag);
+                loadAllowedTags(newTags);
+            });
+        }
+    }, []);
+
+    const loadBlockedTags = useCallback((tags: string[]) => {
         const page = element.current;
 
         if (!page) {
@@ -121,9 +176,7 @@ const UserParentalControl: FunctionComponent = () => {
         for (const btnDeleteTag of blockedTagsElem.querySelectorAll('.btnDeleteTag')) {
             btnDeleteTag.addEventListener('click', function () {
                 const tag = btnDeleteTag.getAttribute('data-tag');
-                const newTags = tags.filter(function (t: string) {
+                const newTags = tags.filter(t => t !== tag);
-                    return t != tag;
-                });
                 loadBlockedTags(newTags);
             });
         }
@@ -145,15 +198,13 @@ const UserParentalControl: FunctionComponent = () => {
             btnDelete.addEventListener('click', function () {
                 const index = parseInt(btnDelete.getAttribute('data-index') ?? '0', 10);
                 schedules.splice(index, 1);
-                const newindex = schedules.filter(function (i: number) {
+                const newindex = schedules.filter((i: number) => i != index);
-                    return i != index;
-                });
                 renderAccessSchedule(newindex);
             });
         }
     }, []);
 
-    const loadUser = useCallback((user, allParentalRatings) => {
+    const loadUser = useCallback((user: UserDto, allParentalRatings: ParentalRating[]) => {
         const page = element.current;
 
         if (!page) {
@@ -161,34 +212,33 @@ const UserParentalControl: FunctionComponent = () => {
             return;
         }
 
-        setUserName(user.Name);
+        setUserName(user.Name || '');
         LibraryMenu.setTitle(user.Name);
         loadUnratedItems(user);
 
-        loadBlockedTags(user.Policy.BlockedTags);
+        loadAllowedTags(user.Policy?.AllowedTags || []);
+        loadBlockedTags(user.Policy?.BlockedTags || []);
         populateRatings(allParentalRatings);
+
         let ratingValue = '';
-
+        if (user.Policy?.MaxParentalRating) {
-        if (user.Policy.MaxParentalRating != null) {
+            allParentalRatings.forEach(rating => {
-            for (let i = 0, length = allParentalRatings.length; i < length; i++) {
+                if (rating.Value && user.Policy?.MaxParentalRating && user.Policy.MaxParentalRating >= rating.Value) {
-                const rating = allParentalRatings[i];
+                    ratingValue = `${rating.Value}`;
-
-                if (user.Policy.MaxParentalRating >= rating.Value) {
-                    ratingValue = rating.Value;
                 }
-            }
+            });
         }
 
         (page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value = ratingValue;
 
-        if (user.Policy.IsAdministrator) {
+        if (user.Policy?.IsAdministrator) {
             (page.querySelector('.accessScheduleSection') as HTMLDivElement).classList.add('hide');
         } else {
             (page.querySelector('.accessScheduleSection') as HTMLDivElement).classList.remove('hide');
         }
-        renderAccessSchedule(user.Policy.AccessSchedules || []);
+        renderAccessSchedule(user.Policy?.AccessSchedules || []);
         loading.hide();
-    }, [loadBlockedTags, loadUnratedItems, populateRatings, renderAccessSchedule]);
+    }, [loadAllowedTags, loadBlockedTags, loadUnratedItems, populateRatings, renderAccessSchedule]);
 
     const loadData = useCallback(() => {
         loading.show();
@@ -212,32 +262,6 @@ const UserParentalControl: FunctionComponent = () => {
 
         loadData();
 
-        const onSaveComplete = () => {
-            loading.hide();
-            toast(globalize.translate('SettingsSaved'));
-        };
-
-        const saveUser = (user: UserDto) => {
-            if (!user.Id || !user.Policy) {
-                throw new Error('Unexpected null user id or policy');
-            }
-
-            const parentalRating = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value, 10);
-            user.Policy.MaxParentalRating = Number.isNaN(parentalRating) ? null : parentalRating;
-            user.Policy.BlockUnratedItems = Array.prototype.filter.call(page.querySelectorAll('.chkUnratedItem'), function (i) {
-                return i.checked;
-            }).map(function (i) {
-                return i.getAttribute('data-itemtype');
-            });
-            user.Policy.AccessSchedules = getSchedulesFromPage();
-            user.Policy.BlockedTags = getBlockedTagsFromPage();
-            window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
-                onSaveComplete();
-            }).catch(err => {
-                console.error('[userparentalcontrol] failed to update user policy', err);
-            });
-        };
-
         const showSchedulePopup = (schedule: AccessSchedule, index: number) => {
             schedule = schedule || {};
             import('../../../../components/accessSchedule/accessSchedule').then(({ default: accessschedule }) => {
@@ -270,6 +294,27 @@ const UserParentalControl: FunctionComponent = () => {
             }) as AccessSchedule[];
         };
 
+        const getAllowedTagsFromPage = () => {
+            return Array.prototype.map.call(page.querySelectorAll('.allowedTag'), function (elem) {
+                return elem.getAttribute('data-tag');
+            }) as string[];
+        };
+
+        const showAllowedTagPopup = () => {
+            prompt({
+                label: globalize.translate('LabelTag')
+            }).then(function (value) {
+                const tags = getAllowedTagsFromPage();
+
+                if (tags.indexOf(value) == -1) {
+                    tags.push(value);
+                    loadAllowedTags(tags);
+                }
+            }).catch(() => {
+                // prompt closed
+            });
+        };
+
         const getBlockedTagsFromPage = () => {
             return Array.prototype.map.call(page.querySelectorAll('.blockedTag'), function (elem) {
                 return elem.getAttribute('data-tag');
@@ -277,24 +322,27 @@ const UserParentalControl: FunctionComponent = () => {
         };
 
         const showBlockedTagPopup = () => {
-            import('../../../../components/prompt/prompt').then(({ default: prompt }) => {
+            prompt({
-                prompt({
+                label: globalize.translate('LabelTag')
-                    label: globalize.translate('LabelTag')
+            }).then(function (value) {
-                }).then(function (value) {
+                const tags = getBlockedTagsFromPage();
-                    const tags = getBlockedTagsFromPage();
 
-                    if (tags.indexOf(value) == -1) {
+                if (tags.indexOf(value) == -1) {
-                        tags.push(value);
+                    tags.push(value);
-                        loadBlockedTags(tags);
+                    loadBlockedTags(tags);
-                    }
+                }
-                }).catch(() => {
+            }).catch(() => {
-                    // prompt closed
+                // prompt closed
-                });
-            }).catch(err => {
-                console.error('[userparentalcontrol] failed to load prompt', err);
             });
         };
 
+        const onSaveComplete = () => {
+            loading.hide();
+            toast(globalize.translate('SettingsSaved'));
+        };
+
+        const saveUser = handleSaveUser(page, getSchedulesFromPage, getAllowedTagsFromPage, getBlockedTagsFromPage, onSaveComplete);
+
         const onSubmit = (e: Event) => {
             loading.show();
             const userId = getParameterByName('userId');
@@ -318,12 +366,16 @@ const UserParentalControl: FunctionComponent = () => {
             }, -1);
         });
 
+        (page.querySelector('#btnAddAllowedTag') as HTMLButtonElement).addEventListener('click', function () {
+            showAllowedTagPopup();
+        });
+
         (page.querySelector('#btnAddBlockedTag') as HTMLButtonElement).addEventListener('click', function () {
             showBlockedTagPopup();
         });
 
         (page.querySelector('.userParentalControlForm') as HTMLFormElement).addEventListener('submit', onSubmit);
-    }, [loadBlockedTags, loadData, renderAccessSchedule]);
+    }, [loadAllowedTags, loadBlockedTags, loadData, renderAccessSchedule]);
 
     const optionMaxParentalRating = () => {
         let content = '';
@@ -378,6 +430,27 @@ const UserParentalControl: FunctionComponent = () => {
                         </div>
                     </div>
                     <br />
+                    <div className='verticalSection' style={{ marginBottom: '2em' }}>
+                        <SectionTitleContainer
+                            SectionClassName='detailSectionHeader'
+                            title={globalize.translate('LabelAllowContentWithTags')}
+                            isBtnVisible={true}
+                            btnId='btnAddAllowedTag'
+                            btnClassName='fab submit sectionTitleButton'
+                            btnTitle='Add'
+                            btnIcon='add'
+                            isLinkVisible={false}
+                        />
+                        <div className='allowedTags' style={{ marginTop: '.5em' }}>
+                            {allowedTags?.map(tag => {
+                                return <TagList
+                                    key={tag}
+                                    tag={tag}
+                                    tagType='allowedTag'
+                                />;
+                            })}
+                        </div>
+                    </div>
                     <div className='verticalSection' style={{ marginBottom: '2em' }}>
                         <SectionTitleContainer
                             SectionClassName='detailSectionHeader'
@@ -391,9 +464,10 @@ const UserParentalControl: FunctionComponent = () => {
                         />
                         <div className='blockedTags' style={{ marginTop: '.5em' }}>
                             {blockedTags.map(tag => {
-                                return <BlockedTagList
+                                return <TagList
                                     key={tag}
                                     tag={tag}
+                                    tagType='blockedTag'
                                 />;
                             })}
                         </div>

src/components/ServerConnections.js

@@ -104,6 +104,18 @@ class ServerConnections extends ConnectionManager {
         return apiClient;
     }
 
+    /**
+     * Gets the ApiClient that is currently connected or throws if not defined.
+     * @async
+     * @returns {Promise<ApiClient>} The current ApiClient instance.
+     */
+    async getCurrentApiClientAsync() {
+        const apiClient = this.currentApiClient();
+        if (!apiClient) throw new Error('[ServerConnection] No current ApiClient instance');
+
+        return apiClient;
+    }
+
     onLocalUserSignedIn(user) {
         const apiClient = this.getApiClient(user.ServerId);
         this.setLocalApiClient(apiClient);

src/components/dashboard/users/TagList.tsx

@@ -2,10 +2,11 @@ import React, { FunctionComponent } from 'react';
 import IconButtonElement from '../../../elements/IconButtonElement';
 
 type IProps = {
-    tag?: string;
+    tag?: string,
+    tagType?: string;
 };
 
-const BlockedTagList: FunctionComponent<IProps> = ({ tag }: IProps) => {
+const TagList: FunctionComponent<IProps> = ({ tag, tagType }: IProps) => {
     return (
         <div className='paperList'>
             <div className='listItem'>
@@ -16,7 +17,7 @@ const BlockedTagList: FunctionComponent<IProps> = ({ tag }: IProps) => {
                 </div>
                 <IconButtonElement
                     is='paper-icon-button-light'
-                    className='blockedTag btnDeleteTag listItemButton'
+                    className={`${tagType} btnDeleteTag listItemButton`}
                     title='Delete'
                     icon='delete'
                     dataTag={tag}
@@ -26,4 +27,4 @@ const BlockedTagList: FunctionComponent<IProps> = ({ tag }: IProps) => {
     );
 };
 
-export default BlockedTagList;
+export default TagList;

src/strings/en-us.json

@@ -528,6 +528,7 @@
     "LabelAlbum": "Album",
     "LabelAlbumArtists": "Album artists",
     "LabelAlbumGain": "Album Gain",
+    "LabelAllowContentWithTags": "Allow items with tags",
     "LabelAllowedRemoteAddresses": "Remote IP address filter",
     "LabelAllowedRemoteAddressesMode": "Remote IP address filter mode",
     "LabelAllowHWTranscoding": "Allow hardware transcoding",