handle new format of shareURL

src/components/CollectionShare.tsx

@@ -43,10 +43,18 @@ function CollectionShare(props: Props) {
     const [sharableLinkError, setSharableLinkError] = useState(null);
     const [publicShareUrl, setPublicShareUrl] = useState<string>(null);
 
-    useEffect(
+    useEffect(() => {
-        () => setPublicShareUrl(props.collection?.publicURLs?.[0]?.url || null),
+        const main = async () => {
-        [props.collection]
+            if (props.collection?.publicURLs?.[0]?.url) {
+                const t = await transformShareURLForHost(
+                    props.collection?.publicURLs?.[0]?.url,
+                    props.collection.key
                 );
+                setPublicShareUrl(t);
+            }
+        };
+        main();
+    }, [props.collection]);
 
     const collectionShare = async (
         { email }: formValues,
@@ -250,10 +258,7 @@ function CollectionShare(props: Props) {
                         <CodeBlock
                             key={publicShareUrl}
                             height={'160px'}
-                            code={transformShareURLForHost(
+                            code={publicShareUrl}
-                                publicShareUrl,
-                                props.collection.key
-                            )}
                         />
                     </div>
                 )}

src/pages/shared-album/index.tsx

@@ -26,6 +26,7 @@ import Container from 'components/Container';
 import constants from 'utils/strings/constants';
 import EnteSpinner from 'components/EnteSpinner';
 import LoadingBar from 'react-top-loading-bar';
+import CryptoWorker from 'utils/crypto';
 
 export default function PublicCollectionGallery() {
     const token = useRef<string>(null);
@@ -46,22 +47,22 @@ export default function PublicCollectionGallery() {
     const closeMessageDialog = () => setMessageDialogView(false);
 
     const startLoading = () => loadingBar.current?.continuousStart();
-    const finishLoading = () => loadingBar.current.complete();
+    const finishLoading = () => loadingBar.current?.complete();
 
     useEffect(() => {
         const main = async () => {
+            const worker = await new CryptoWorker();
             url.current = window.location.href;
-            const urlParams = new URLSearchParams(window.location.search);
+            const urlS = new URL(url.current);
-            const eToken = urlParams.get('accessToken');
+            const eToken = urlS.searchParams.get('t');
-            const eCollectionKey = decodeURIComponent(
+            const eCollectionKey = urlS.hash.slice(1);
-                urlParams.get('collectionKey')
+            const decodedCollectionKey = await worker.fromHex(eCollectionKey);
-            );
+            if (!eToken || !decodedCollectionKey) {
-            if (!eToken || !eCollectionKey) {
                 setLoading(false);
                 return;
             }
             token.current = eToken;
-            collectionKey.current = eCollectionKey;
+            collectionKey.current = decodedCollectionKey;
             url.current = window.location.href;
             const localCollection = await getLocalPublicCollection(
                 eCollectionKey

src/utils/collection/index.ts

@@ -16,6 +16,7 @@ import { logError } from 'utils/sentry';
 import constants from 'utils/strings/constants';
 import { Collection } from 'types/collection';
 import { CollectionType } from 'constants/collection';
+import CryptoWorker from 'utils/crypto';
 
 export enum COLLECTION_OPS_TYPE {
     ADD,
@@ -108,19 +109,19 @@ export async function downloadCollection(
     }
 }
 
-export function transformShareURLForHost(url: string, collectionKey: string) {
+export async function transformShareURLForHost(
+    url: string,
+    collectionKey: string
+) {
+    const worker = await new CryptoWorker();
     if (!url) {
         return null;
     }
     const host = window.location.host;
     const sharableURL = new URL(url);
     sharableURL.host = host;
-    const accessToken = sharableURL.pathname.slice(
+    sharableURL.pathname = '/shared-album';
-        -sharableURL.pathname.lastIndexOf('/') + 1
+    sharableURL.hash = await worker.toHex(collectionKey);
-    );
-    sharableURL.pathname = '/shared-album/';
-    sharableURL.searchParams.append('accessToken', accessToken);
-    sharableURL.searchParams.append('collectionKey', collectionKey);
     sharableURL.protocol = 'http';
     return sharableURL.href;
 }