Restrict "Timeout" feature to content owners

The main reason to do this is because we are doing extra comment filtering using our blocklist (so that we don't see people we blocked regardless on who's content we are at), but we are also using a cached blocklist so we don't know when a Timeout will be lifted to allow new livestream messages. We will need Commentron Issue-80 to truly fix this.

For the case of when we are the owner of the content, we don't run the extra filtering (since it is equivalent to Commentron's filtering), hence the issue doesn't exist. Any new livestream messages received through websocket won't be locally filtered.

ui/modal/modalBlockChannel/view.jsx

@@ -71,21 +71,26 @@ export default function ModalBlockChannel(props: Props) {
   const [timeoutInputErr, setTimeoutInputErr] = React.useState('');
   const [timeoutSec, setTimeoutSec] = React.useState(-1);
 
-  const personalIsTheOnlyTab = !activeChannelIsModerator && !activeChannelIsAdmin;
+  const isPersonalTheOnlyTab = !activeChannelIsModerator && !activeChannelIsAdmin;
+  const isTimeoutAvail = contentClaim && contentClaim.is_my_output;
   const blockButtonDisabled = blockType === BLOCK.TIMEOUT && timeoutSec < 1;
 
   // **************************************************************************
   // **************************************************************************
 
-  // Check 'tab' validity on mount.
+  // Check settings validity on mount.
   React.useEffect(() => {
     if (
-      personalIsTheOnlyTab ||
+      isPersonalTheOnlyTab ||
       (tab === TAB.MODERATOR && !activeChannelIsModerator) ||
       (tab === TAB.ADMIN && !activeChannelIsAdmin)
     ) {
       setTab(TAB.PERSONAL);
     }
+
+    if (!isTimeoutAvail && blockType === BLOCK.TIMEOUT) {
+      setBlockType(BLOCK.PERMANENT);
+    }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 'timeoutInput' to 'timeoutSec' conversion.
@@ -154,13 +159,14 @@ export default function ModalBlockChannel(props: Props) {
     }
   }
 
-  function getBlockTypeElem(value, label) {
+  function getBlockTypeElem(value, label, disabled = false, disabledLabel = '') {
     return (
       <FormField
         type="radio"
         name={value}
         key={value}
-        label={__(label)}
+        label={disabled && disabledLabel ? __(disabledLabel) : __(label)}
+        disabled={disabled}
         checked={blockType === value}
         onChange={() => setBlockType(value)}
       />
@@ -239,14 +245,21 @@ export default function ModalBlockChannel(props: Props) {
   // **************************************************************************
   // **************************************************************************
 
+  if (isPersonalTheOnlyTab && !isTimeoutAvail) {
+    // There's only 1 option. Just execute it and don't show the modal.
+    commentModBlock(commenterUri);
+    closeModal();
+    return null;
+  }
+
   return (
     <Modal isOpen type="card" onAborted={closeModal}>
       <Card
         title={__('Block Channel')}
         subtitle={getCommenterPreview(commenterUri)}
         actions={
           <>
-            {!personalIsTheOnlyTab && (
+            {!isPersonalTheOnlyTab && (
               <div className="section__actions">
                 <div className="section">
                   <label>{__('Block list')}</label>
@@ -265,7 +278,12 @@ export default function ModalBlockChannel(props: Props) {
               <div className="block-modal--values">
                 <fieldset>
                   {getBlockTypeElem(BLOCK.PERMANENT, 'Permanent')}
-                  {getBlockTypeElem(BLOCK.TIMEOUT, 'Timeout --[time-based ban instead of permanent]--')}
+                  {getBlockTypeElem(
+                    BLOCK.TIMEOUT,
+                    'Timeout --[time-based ban instead of permanent]--',
+                    !isTimeoutAvail,
+                    'Timeout (only available on content that you own)'
+                  )}
                 </fieldset>
                 {blockType === BLOCK.TIMEOUT && getTimeoutDurationElem()}
               </div>