Merge branch 'develop'

.github/ISSUE_TEMPLATE/bug_report.md

@@ -9,6 +9,9 @@ assignees: ''
 **Describe the bug**
 A clear and concise description of what the bug is.
 
+**Are you on latest or develop branch?**
+Please fill in which docker image you are currently using.
+
 **To Reproduce**
 Steps to reproduce the behavior:
 

src/components/Common/Modal/index.tsx

@@ -63,126 +63,122 @@ const Modal: React.FC<ModalProps> = ({
   });
   useLockBodyScroll(true, disableScrollLock);
 
-  return (
+  return ReactDOM.createPortal(
-    <>
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      {ReactDOM.createPortal(
+    <div
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          typeof onCancel === 'function' && backgroundClickable
+            ? onCancel()
+            : undefined;
+        }
+      }}
+    >
+      <Transition
+        enter="transition opacity-0 duration-300 transform scale-75"
+        enterFrom="opacity-0 scale-75"
+        enterTo="opacity-100 scale-100"
+        leave="transition opacity-100 duration-300"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        show={loading}
+      >
+        <div style={{ position: 'absolute' }}>
+          <LoadingSpinner />
+        </div>
+      </Transition>
+      <Transition
+        enter="transition opacity-0 duration-300 transform scale-75"
+        enterFrom="opacity-0 scale-75"
+        enterTo="opacity-100 scale-100"
+        leave="transition opacity-100 duration-300"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        show={!loading}
+      >
         <div
-          className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
+          className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
-          onKeyDown={(e) => {
+          role="dialog"
-            if (e.key === 'Escape') {
+          aria-modal="true"
-              typeof onCancel === 'function' && backgroundClickable
+          aria-labelledby="modal-headline"
-                ? onCancel()
+          ref={modalRef}
-                : undefined;
-            }
-          }}
         >
-          <Transition
+          <div className="sm:flex sm:items-center">
-            enter="transition opacity-0 duration-300 transform scale-75"
+            {iconSvg && (
-            enterFrom="opacity-0 scale-75"
+              <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
-            enterTo="opacity-100 scale-100"
+                {iconSvg}
-            leave="transition opacity-100 duration-300"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-            show={loading}
-          >
-            <div style={{ position: 'absolute' }}>
-              <LoadingSpinner />
-            </div>
-          </Transition>
-          <Transition
-            enter="transition opacity-0 duration-300 transform scale-75"
-            enterFrom="opacity-0 scale-75"
-            enterTo="opacity-100 scale-100"
-            leave="transition opacity-100 duration-300"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-            show={!loading}
-          >
-            <div
-              className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
-              role="dialog"
-              aria-modal="true"
-              aria-labelledby="modal-headline"
-              ref={modalRef}
-            >
-              <div className="sm:flex sm:items-center">
-                {iconSvg && (
-                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
-                    {iconSvg}
-                  </div>
-                )}
-                <div
-                  className={`mt-3 text-center sm:mt-0 sm:text-left ${
-                    iconSvg ? 'sm:ml-4' : 'mb-6'
-                  }`}
-                >
-                  {title && (
-                    <h3
-                      className="text-lg leading-6 font-medium text-white"
-                      id="modal-headline"
-                    >
-                      {title}
-                    </h3>
-                  )}
-                </div>
               </div>
-              {children && (
+            )}
-                <div className="mt-4 text-sm leading-5 text-gray-300">
+            <div
-                  {children}
+              className={`mt-3 text-center sm:mt-0 sm:text-left ${
-                </div>
+                iconSvg ? 'sm:ml-4' : 'mb-6'
-              )}
+              }`}
-              {(onCancel || onOk || onSecondary || onTertiary) && (
+            >
-                <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
+              {title && (
-                  {typeof onOk === 'function' && (
+                <h3
-                    <Button
+                  className="text-lg leading-6 font-medium text-white"
-                      buttonType={okButtonType}
+                  id="modal-headline"
-                      onClick={onOk}
+                >
-                      className="ml-3"
+                  {title}
-                      disabled={okDisabled}
+                </h3>
-                    >
-                      {okText ? okText : 'Ok'}
-                    </Button>
-                  )}
-                  {typeof onSecondary === 'function' && secondaryText && (
-                    <Button
-                      buttonType={secondaryButtonType}
-                      onClick={onSecondary}
-                      className="ml-3"
-                      disabled={secondaryDisabled}
-                    >
-                      {secondaryText}
-                    </Button>
-                  )}
-                  {typeof onTertiary === 'function' && tertiaryText && (
-                    <Button
-                      buttonType={tertiaryButtonType}
-                      onClick={onTertiary}
-                      className="ml-3"
-                      disabled={tertiaryDisabled}
-                    >
-                      {tertiaryText}
-                    </Button>
-                  )}
-                  {typeof onCancel === 'function' && (
-                    <Button
-                      buttonType={cancelButtonType}
-                      onClick={onCancel}
-                      className="ml-3 sm:ml-0 sm:px-4"
-                    >
-                      {cancelText
-                        ? cancelText
-                        : intl.formatMessage(globalMessages.cancel)}
-                    </Button>
-                  )}
-                </div>
               )}
             </div>
-          </Transition>
+          </div>
-        </div>,
+          {children && (
-        document.body
+            <div className="mt-4 text-sm leading-5 text-gray-300">
-      )}
+              {children}
-    </>
+            </div>
+          )}
+          {(onCancel || onOk || onSecondary || onTertiary) && (
+            <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
+              {typeof onOk === 'function' && (
+                <Button
+                  buttonType={okButtonType}
+                  onClick={onOk}
+                  className="ml-3"
+                  disabled={okDisabled}
+                >
+                  {okText ? okText : 'Ok'}
+                </Button>
+              )}
+              {typeof onSecondary === 'function' && secondaryText && (
+                <Button
+                  buttonType={secondaryButtonType}
+                  onClick={onSecondary}
+                  className="ml-3"
+                  disabled={secondaryDisabled}
+                >
+                  {secondaryText}
+                </Button>
+              )}
+              {typeof onTertiary === 'function' && tertiaryText && (
+                <Button
+                  buttonType={tertiaryButtonType}
+                  onClick={onTertiary}
+                  className="ml-3"
+                  disabled={tertiaryDisabled}
+                >
+                  {tertiaryText}
+                </Button>
+              )}
+              {typeof onCancel === 'function' && (
+                <Button
+                  buttonType={cancelButtonType}
+                  onClick={onCancel}
+                  className="ml-3 sm:ml-0 sm:px-4"
+                >
+                  {cancelText
+                    ? cancelText
+                    : intl.formatMessage(globalMessages.cancel)}
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </Transition>
+    </div>,
+    document.body
   );
 };
 

src/components/Search/index.tsx

@@ -10,7 +10,6 @@ import ListView from '../Common/ListView';
 import { LanguageContext } from '../../context/LanguageContext';
 import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
-import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({
   searchresults: 'Search Results',
@@ -66,25 +65,7 @@ const Search: React.FC = () => {
 
   return (
     <>
-      <div className="md:flex md:items-center md:justify-between mb-6 sm:mb-0 mt-6">
+      <Header>{intl.formatMessage(messages.searchresults)}</Header>
-        <Header>{intl.formatMessage(messages.searchresults)}</Header>
-        <div className="mt-4 flex md:mt-0 md:ml-4">
-          <span className="relative z-0 inline-flex shadow-sm rounded-md">
-            <button
-              type="button"
-              className="relative inline-flex items-center px-4 py-2 rounded-l-md border border-indigo-900 bg-indigo-500 hover:bg-indigo-400 text-sm leading-5 font-medium text-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
-            >
-              {intl.formatMessage(globalMessages.movies)}
-            </button>
-            <button
-              type="button"
-              className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-indigo-900 bg-indigo-500   text-sm leading-5 font-medium text-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
-            >
-              {intl.formatMessage(globalMessages.tvshows)}
-            </button>
-          </span>
-        </div>
-      </div>
       <ListView
         items={titles}
         isEmpty={isEmpty}

src/components/Settings/RadarrModal/index.tsx

@@ -108,7 +108,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
           {
             hostname,
             apiKey,
-            port,
+            port: Number(port),
             baseUrl,
             useSsl,
           }
@@ -185,11 +185,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
             const submission = {
               name: values.name,
               hostname: values.hostname,
-              port: values.port,
+              port: Number(values.port),
               apiKey: values.apiKey,
               useSsl: values.ssl,
               baseUrl: values.baseUrl,
-              activeProfileId: values.activeProfileId,
+              activeProfileId: Number(values.activeProfileId),
               activeProfileName: profileName,
               activeDirectory: values.rootFolder,
               is4k: values.is4k,

src/components/Settings/SonarrModal/index.tsx

@@ -111,7 +111,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
           {
             hostname,
             apiKey,
-            port,
+            port: Number(port),
             baseUrl,
             useSsl,
           }
@@ -188,11 +188,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
             const submission = {
               name: values.name,
               hostname: values.hostname,
-              port: values.port,
+              port: Number(values.port),
               apiKey: values.apiKey,
               useSsl: values.ssl,
               baseUrl: values.baseUrl,
-              activeProfileId: values.activeProfileId,
+              activeProfileId: Number(values.activeProfileId),
               activeProfileName: profileName,
               activeDirectory: values.rootFolder,
               is4k: values.is4k,

src/hooks/useClickOutside.ts

@@ -15,7 +15,7 @@ const useClickOutside = (
 ): void => {
   useEffect(() => {
     const handleBodyClick = (e: MouseEvent) => {
-      if (!ref.current?.contains(e.target as Node)) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
         callback(e);
       }
     };