feat: add cookie migration

README.md

@@ -48,16 +48,18 @@ There you go, you now have an instance of Photon running.
 
 The most common settings you'll use are `PUBLIC_INSTANCE_URL`. Some selfhosters with `PUBLIC_SSR_ENABLED` set to true might want the instance url to be different for the server. You can use the `PUBLIC_INTERNAL_INSTANCE` variable for that.
 
+`PUBLIC_MIGRATE_COOKIE` is useful if you want to switch Photon to your default frontend. It'll convert the logged in cookie from lemmy-ui to a Photon account. It will only work if you have `PUBLIC_INSTANCE_URL` set, and it will login with that instance.
+
 The following environment variables can be set to override the default settings:
 
 
 | Variable                        | Values              | Default Value                          |
-| --------------------------------- | --------------------- | ---------------------------------------- |
+| ------------------------------- | ------------------- | -------------------------------------- |
 | PUBLIC_INSTANCE_URL             | URL                 | `lemmy.ml`                             |
 | PUBLIC_INTERNAL_INSTANCE        | URL?                | null                                   |
 | PUBLIC_LOCK_TO_INSTANCE         | `bool`              | `true` if `PUBLIC_INSTANCE_URL` is set |
 | PUBLIC_SSR_ENABLED              | `bool`              | `false`                                |
-|                                 |                     |                                        |
+| PUBLIC_MIGRATE_COOKIE           | `bool`              | `false`                                |
 | PUBLIC_THEME                    | system\|dark\|light | system                                 |
 | PUBLIC_EXPANDABLE_IMAGES        | `bool`              | true                                   |
 | PUBLIC_MARK_READ_POSTS          | `bool`              | true                                   |

src/lib/auth.ts

@@ -14,6 +14,8 @@ import {
 } from 'lemmy-js-client'
 import { get, writable } from 'svelte/store'
 import { MINIMUM_VERSION, versionIsSupported } from '$lib/version.js'
+import { browser } from '$app/environment'
+import { env } from '$env/dynamic/public'
 
 const getDefaultProfile = (): Profile => ({
   id: -1,
@@ -61,6 +63,14 @@ interface PersonData extends MyUserInfo {
   }
 }
 
+const getCookie = (key: string): string | undefined => {
+  if (!browser) return undefined
+
+  // sorry i was dying when i wrote this line
+  // ask chatgpt or something to explain this for you
+  return document?.cookie?.split(';').map(c => c.trim()).find(c => c.split('=')?.[0] == key)?.split('=')?.[1]
+}
+
 export let profileData = writable<ProfileData>(
   getFromStorage<ProfileData>('profileData') ?? { profiles: [], profile: -1 }
 )
@@ -79,6 +89,23 @@ profileData.subscribe(async (pd) => {
   }
 })
 
+if (env.PUBLIC_MIGRATE_COOKIE && get(profileData).profiles.length == 0 && env.PUBLIC_INSTANCE_URL) {
+  const jwt = getCookie('jwt')
+  if (jwt) {
+    new Promise(async () => {
+        const user = await userFromJwt(jwt, env.PUBLIC_INSTANCE_URL)
+        if (!user) return
+
+        const result = await setUser(jwt, env.PUBLIC_INSTANCE_URL, user?.user.local_user_view.person.name)
+
+        if (result) 
+          toast({ content: 'Your instance migrated to Photon, and you were logged in using a leftover cookie.', type: 'success' })
+
+    })
+
+  }
+}
+
 export let profile = writable<Profile | undefined>(getProfile())
 
 profile.subscribe(async (p) => {

src/lib/components/lemmy/post/Post.svelte

@@ -25,6 +25,8 @@
   export let hideCommunity = false
   export let view = $userSettings.view
 
+  $: type = mediaType(post.post.url, view)
+
   let loaded = false
 </script>
 
@@ -35,8 +37,8 @@
   {view != 'card' ? 'bg-transparent !border-0' : 'p-5'} {view == 'compact'
     ? 'py-4'
     : view == 'list'
-    ? 'py-5'
-    : 'py-5'} {$$props.class}"
+      ? 'py-5'
+      : 'py-5'} {$$props.class}"
   id={post.post.id}
 >
   <div
@@ -61,7 +63,7 @@
         >
           <slot name="badges" slot="badges" />
         </PostMeta>
-        {#if post.post.embed_title != post.post.name || view == 'compact'}
+        {#if !(post.post.embed_title == post.post.name && type == 'embed') || view == 'compact'}
           <a
             target={$userSettings.openLinksInNewTab ? '_blank' : ''}
             href="/post/{getInstance()}/{post.post.id}"
@@ -74,11 +76,7 @@
           </a>
         {/if}
       </div>
-      <PostMedia
-        bind:post={post.post}
-        {view}
-        type={mediaType(post.post, view)}
-      />
+      <PostMedia bind:post={post.post} {view} {type} />
       {#if post.post.body && !post.post.nsfw && view != 'compact'}
         <div
           class="text-sm relative overflow-hidden

src/lib/components/lemmy/post/helpers.ts

@@ -32,19 +32,19 @@ const YOUTUBE_REGEX = /^(?:(?:https?:)?\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\
 export const isYoutubeLink = (url?: string): RegExpMatchArray | null => {
   if (!url) return null
 
-  return url.match(url)
+  return url?.match?.(YOUTUBE_REGEX)
 }
 
 export const postLink = (post: Post) => `/post/${getInstance()}/${post.id}`
 
 export type MediaType = 'video' | 'image' | 'iframe' | 'embed' | 'none'
 export type IframeType = 'youtube' | 'video' | 'none'
 
-export const mediaType = (post: Post, view: View = 'cozy'): MediaType => {
-  if (post.url) {
-    if (isImage(post.url)) return 'image'
-    if (isVideo(post.url)) return 'iframe'
-    if (isYoutubeLink(post.url)) return 'iframe'
+export const mediaType = (url?: string, view: View = 'cozy'): MediaType => {
+  if (url) {
+    if (isImage(url)) return 'image'
+    if (isVideo(url)) return 'iframe'
+    if (isYoutubeLink(url)) return 'iframe'
     return 'embed'
   }
 

src/lib/components/lemmy/post/media/PostMedia.svelte

@@ -18,6 +18,8 @@
   export let post: Post
   export let type: MediaType = 'none'
   export let opened: boolean | undefined = undefined
+
+  console.log
 </script>
 
 {#if type == 'image'}
@@ -79,21 +81,7 @@
       </svelte:element>
     </svelte:component>
   {/if}
-{:else if type == 'video' && (view == 'cozy' || view == 'card')}
-  <a
-    href={postLink(post)}
-    style="height: 300px;"
-    class="w-full rounded-xl flex flex-col items-center justify-center relative z-0 overflow-hidden
-          text-white p-4"
-  >
-    <div
-      class="absolute blur-xl -z-10 top-0 left-0 w-full h-full bg-gradient-to-br from-green-800 via-blue-900 via-20% to-red-700"
-    />
-    <Icon src={VideoCamera} solid size="48" />
-    <span class="font-bold text-2xl">Video</span>
-    <p class="text-base">Go to the post to view this video.</p>
-  </a>
-{:else if type == 'iframe' && (view == 'cozy' || view == 'card') && post.url}
+{:else if (type == 'iframe' || type == 'video') && (view == 'cozy' || view == 'card') && post.url}
   <PostIframe
     thumbnail={post.thumbnail_url}
     type={iframeType(post)}

src/routes/post/[instance]/[id=integer]/+page.svelte

@@ -181,7 +181,7 @@
     <Markdown source={post.post_view.post.name} inline />
   </h1>
   <PostMedia
-    type={mediaType(post.post_view.post)}
+    type={mediaType(post.post_view.post.url)}
     post={post.post_view.post}
     opened
   />