Merge branch 'development' into pr/1130

src/App/styles.less

@@ -23,8 +23,8 @@
 // HTML sizes
 @html-width: ~"calc(max(var(--small-viewport-width), var(--dynamic-viewport-width)))";
 @html-height: ~"calc(max(var(--small-viewport-height), var(--dynamic-viewport-height)))";
-@html-standalone-width: ~"calc(max(100%, var(--small-viewport-width)))";
+@html-standalone-width: ~"calc(max(100%, var(--large-viewport-width)))";
-@html-standalone-height: ~"calc(max(100%, var(--small-viewport-height)))";
+@html-standalone-height: ~"calc(max(100%, var(--large-viewport-height)))";
 
 // Safe area insets
 @safe-area-inset-top: env(safe-area-inset-top, 0rem);
@@ -156,6 +156,7 @@ html {
     overscroll-behavior: none;
     user-select: none;
     touch-action: manipulation;
+    background-color: var(--primary-background-color);
     -webkit-tap-highlight-color: transparent;
 
     @media (display-mode: standalone) {

src/common/Platform/Platform.tsx

@@ -18,7 +18,9 @@ const PlatformProvider = ({ children }: Props) => {
     const openExternal = (url: string) => {
         try {
             const { hostname } = new URL(url);
-            const isWhitelisted = WHITELISTED_HOSTS.some((host: string) => hostname.endsWith(host));
+            const isWhitelisted = WHITELISTED_HOSTS.some((host: string) =>
+                hostname === host || hostname.endsWith('.' + host)
+            );
             const finalUrl = !isWhitelisted ? `https://www.stremio.com/warning#${encodeURIComponent(url)}` : url;
 
             window.open(finalUrl, '_blank');

src/components/ContinueWatchingItem/ContinueWatchingItem.js

@@ -5,24 +5,11 @@ const PropTypes = require('prop-types');
 const { useServices } = require('stremio/services');
 const LibItem = require('stremio/components/LibItem');
 
-const ContinueWatchingItem = ({ _id, notifications, deepLinks, ...props }) => {
+const ContinueWatchingItem = ({ _id, notifications, ...props }) => {
     const { core } = useServices();
 
-    const onClick = React.useCallback(() => {
-        if (deepLinks?.metaDetailsVideos ?? deepLinks?.metaDetailsStreams) {
-            window.location = deepLinks?.metaDetailsVideos ?? deepLinks?.metaDetailsStreams;
-        }
-    }, [deepLinks]);
-
-    const onPlayClick = React.useCallback((event) => {
-        event.stopPropagation();
-        if (deepLinks?.player ?? deepLinks?.metaDetailsStreams ?? deepLinks?.metaDetailsVideos) {
-            window.location = deepLinks?.player ?? deepLinks?.metaDetailsStreams ?? deepLinks?.metaDetailsVideos;
-        }
-    }, [deepLinks]);
-
     const onDismissClick = React.useCallback((event) => {
-        event.stopPropagation();
+        event.preventDefault();
         if (typeof _id === 'string') {
             core.transport.dispatch({
                 action: 'Ctx',
@@ -47,8 +34,6 @@ const ContinueWatchingItem = ({ _id, notifications, deepLinks, ...props }) => {
             _id={_id}
             posterChangeCursor={true}
             notifications={notifications}
-            onClick={onClick}
-            onPlayClick={onPlayClick}
             onDismissClick={onDismissClick}
         />
     );

src/components/LibItem/LibItem.js

@@ -29,7 +29,7 @@ const LibItem = ({ _id, removable, notifications, watched, ...props }) => {
                 case 'details':
                     return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
                 case 'watched':
-                    return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
+                    return typeof watched !== 'undefined' && props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
                 case 'dismiss':
                     return typeof _id === 'string' && props.progress !== null && !isNaN(props.progress) && props.progress > 0;
                 case 'remove':
@@ -119,6 +119,16 @@ const LibItem = ({ _id, removable, notifications, watched, ...props }) => {
         }
     }, [_id, props.deepLinks, props.optionOnSelect]);
 
+    const onPlayClick = React.useMemo(() => {
+        if (props.deepLinks && typeof props.deepLinks.player === 'string') {
+            return (event) => {
+                event.preventDefault();
+                window.location = props.deepLinks.player;
+            };
+        }
+        return null;
+    }, [props.deepLinks]);
+
     return (
         <MetaItem
             {...props}
@@ -126,6 +136,7 @@ const LibItem = ({ _id, removable, notifications, watched, ...props }) => {
             newVideos={newVideos}
             options={options}
             optionOnSelect={optionOnSelect}
+            onPlayClick={onPlayClick}
         />
     );
 };

src/components/MetaItem/MetaItem.js

@@ -18,15 +18,15 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, poste
     const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
     const href = React.useMemo(() => {
         return deepLinks ?
-            typeof deepLinks.player === 'string' ?
-                deepLinks.player
-                :
             typeof deepLinks.metaDetailsStreams === 'string' ?
                 deepLinks.metaDetailsStreams
                 :
                 typeof deepLinks.metaDetailsVideos === 'string' ?
                     deepLinks.metaDetailsVideos
                     :
+                    typeof deepLinks.player === 'string' ?
+                        deepLinks.player
+                        :
                         null
             :
             null;

src/index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, user-scalable=no, viewport-fit=cover">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="Stremio">
     <link rel="icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.faviconsPath %>/favicon.ico">
     <link rel="manifest" href="manifest.json" />

src/routes/Player/SideDrawer/SideDrawer.less

@@ -13,6 +13,7 @@
     display: flex;
     flex-direction: column;
     padding: @padding;
+    padding-top: calc(@padding + var(--safe-area-inset-top));
     height: 100dvh;
     max-width: 35rem;
     overflow-y: auto;
@@ -28,7 +29,7 @@
     .close-button {
         display: none;
         position: absolute;
-        top: 1.3rem;
+        top: calc(1.3rem + var(--safe-area-inset-top));
         right: 1.3rem;
         padding: 0.5rem;
         background-color: transparent;