tapexyz · sasicodes · Nov 4, 2023 · Nov 4, 2023 · Nov 4, 2023 · Nov 4, 2023
@@ -113,7 +113,7 @@ const Video: FC<Props> = ({ video }) => {
             onClick={onClickOverlay}
             role="button"
           >
-            <button className="from-brand-300 to-brand-600 rounded-full bg-gradient-to-r p-2 shadow-2xl xl:p-5">
+            <button className="from-brand-300 to-brand-600 rounded-full bg-gradient-to-r p-3 shadow-2xl xl:p-5">
               <PlayOutline className="h-6 w-6 pl-0.5 text-white" />
             </button>
           </div>

@@ -31,7 +31,7 @@ const VideoOverlay: FC<Props> = ({ video }) => {
             onClick={() => Tower.track(EVENTS.EMBED_VIDEO.CLICK_EMBED_PROFILE)}
           >
             <img
-              src={getProfilePicture(video.by)}
+              src={getProfilePicture(video.by, 'AVATAR')}
               className="h-9 w-9 rounded-full"
               draggable={false}
               alt={getProfile(video.by)?.slug}

@@ -11,6 +11,7 @@ const moduleExports = {
   experimental: {
     scrollRestoration: true
   },
+  productionBrowserSourceMaps: true,
   async rewrites() {
     return [
       {

@@ -37,7 +37,7 @@ const CategoryFilters: FC<Props> = ({ heading, subheading }) => {
             'whitespace-nowrap px-10 py-2.5 font-medium',
             activeTagFilter === 'all'
               ? 'from-brand-50 border-brand-400 dark:from-brand-950 border-b-2 bg-gradient-to-t to-transparent'
-              : 'text-dust border-b dark:border-gray-800'
+              : 'border-b dark:border-gray-800'
           )}
           onClick={() => onFilter('all')}
         >
@@ -50,7 +50,7 @@ const CategoryFilters: FC<Props> = ({ heading, subheading }) => {
               'whitespace-nowrap px-6 py-2.5 font-medium',
               activeTagFilter === category.tag
                 ? 'from-brand-50 border-brand-400 dark:from-brand-950 border-b-2 bg-gradient-to-t to-transparent'
-                : 'text-dust border-b dark:border-gray-800'
+                : 'border-b dark:border-gray-800'
             )}
             onClick={() => onFilter(category.tag)}
           >

@@ -16,13 +16,15 @@ const FullPageLoader = () => {
           className="h-10"
           alt="tape"
           height={50}
+          width={200}
           draggable={false}
         />
       ) : (
         <img
           src={`${STATIC_ASSETS}/brand/logo-with-text-dark.webp`}
           className="h-10"
           height={50}
+          width={200}
           alt="tape"
           draggable={false}
         />

@@ -24,7 +24,7 @@ const HorizantalScroller: FC<Props> = ({ heading, subheading, sectionRef }) => {
     <div className="flex items-center justify-between">
       <div className="flex items-center space-x-3 text-xl">
         <h1 className="text-brand-500 font-bold">{heading}</h1>
-        <h1>{subheading}</h1>
+        <p>{subheading}</p>
       </div>
       <div className="space-x-2">
         <button

@@ -9,10 +9,8 @@ const VerifiedSolid = (props: SVGProps<SVGSVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M16 8.375C16 8.93437 15.8656 9.45312 15.5969 9.92813C15.3281 10.4031 14.9688 10.775 14.5156 11.0344C14.5281 11.1188 14.5344 11.25 14.5344 11.4281C14.5344 12.275 14.25 12.9937 13.6875 13.5875C13.1219 14.1844 12.4406 14.4812 11.6438 14.4812C11.2875 14.4812 10.9469 14.4156 10.625 14.2844C10.375 14.7969 10.0156 15.2094 9.54375 15.525C9.075 15.8438 8.55937 16 8 16C7.42812 16 6.90938 15.8469 6.44688 15.5344C5.98125 15.225 5.625 14.8094 5.375 14.2844C5.05312 14.4156 4.71562 14.4812 4.35625 14.4812C3.55937 14.4812 2.875 14.1844 2.30312 13.5875C1.73125 12.9937 1.44687 12.2719 1.44687 11.4281C1.44687 11.3344 1.45938 11.2031 1.48125 11.0344C1.02813 10.7719 0.66875 10.4031 0.4 9.92813C0.134375 9.45312 0 8.93437 0 8.375C0 7.78125 0.15 7.23438 0.446875 6.74062C0.74375 6.24687 1.14375 5.88125 1.64375 5.64375C1.5125 5.2875 1.44687 4.92812 1.44687 4.57188C1.44687 3.72813 1.73125 3.00625 2.30312 2.4125C2.875 1.81875 3.55937 1.51875 4.35625 1.51875C4.7125 1.51875 5.05312 1.58438 5.375 1.71563C5.625 1.20312 5.98438 0.790625 6.45625 0.475C6.925 0.159375 7.44063 0 8 0C8.55937 0 9.075 0.159375 9.54375 0.471875C10.0125 0.7875 10.375 1.2 10.625 1.7125C10.9469 1.58125 11.2844 1.51562 11.6438 1.51562C12.4406 1.51562 13.1219 1.8125 13.6875 2.40937C14.2531 3.00625 14.5344 3.725 14.5344 4.56875C14.5344 4.9625 14.475 5.31875 14.3562 5.64062C14.8562 5.87813 15.2563 6.24375 15.5531 6.7375C15.85 7.23438 16 7.78125 16 8.375ZM7.65938 10.7844L10.9625 5.8375C11.0469 5.70625 11.0719 5.5625 11.0437 5.40938C11.0125 5.25625 10.9344 5.13438 10.8031 5.05312C10.6719 4.96875 10.5281 4.94063 10.375 4.9625C10.2188 4.9875 10.0938 5.0625 10 5.19375L7.09062 9.56875L5.75 8.23125C5.63125 8.1125 5.49375 8.05625 5.34062 8.0625C5.18437 8.06875 5.05 8.125 4.93125 8.23125C4.825 8.3375 4.77187 8.47187 4.77187 8.63437C4.77187 8.79375 4.825 8.92813 4.93125 9.0375L6.77187 10.8781L6.8625 10.95C6.96875 11.0219 7.07812 11.0562 7.18437 11.0562C7.39375 11.0531 7.55313 10.9656 7.65938 10.7844Z"
       fill="currentColor"
+      d="M16 8.375c0 .56-.134 1.078-.403 1.553a2.876 2.876 0 0 1-1.081 1.106c.012.085.018.216.018.394 0 .847-.284 1.566-.847 2.16-.565.596-1.246.893-2.043.893-.357 0-.697-.065-1.019-.197a3.1 3.1 0 0 1-1.081 1.241A2.686 2.686 0 0 1 8 16c-.572 0-1.09-.153-1.553-.466a3.03 3.03 0 0 1-1.072-1.25c-.322.132-.66.197-1.019.197-.797 0-1.481-.297-2.053-.893-.572-.594-.856-1.316-.856-2.16 0-.094.012-.225.034-.394A2.897 2.897 0 0 1 .4 9.928 3.133 3.133 0 0 1 0 8.375c0-.594.15-1.14.447-1.634.297-.494.697-.86 1.197-1.097a3.09 3.09 0 0 1-.197-1.072c0-.844.284-1.566.856-2.16.572-.593 1.256-.893 2.053-.893.357 0 .697.065 1.019.197A3.1 3.1 0 0 1 6.456.475 2.71 2.71 0 0 1 8 0c.56 0 1.075.16 1.544.472.468.316.831.728 1.081 1.24.322-.13.66-.196 1.019-.196.797 0 1.478.296 2.043.893.566.597.847 1.316.847 2.16 0 .394-.059.75-.178 1.072.5.237.9.603 1.197 1.096.297.497.447 1.044.447 1.638Zm-8.34 2.41 3.303-4.947a.573.573 0 0 0 .08-.429.523.523 0 0 0-.24-.356.609.609 0 0 0-.428-.09.548.548 0 0 0-.375.23L7.09 9.57 5.75 8.23a.532.532 0 0 0-.41-.168.632.632 0 0 0-.409.168.546.546 0 0 0-.16.403c0 .16.054.294.16.403l1.84 1.841.091.072a.572.572 0 0 0 .322.106.524.524 0 0 0 .475-.272Z"
     />
   </svg>
 )

@@ -38,13 +38,15 @@ const Navbar = () => {
                 className="-mb-0.5 h-6"
                 alt="tape"
                 height={30}
+                width={110}
                 draggable={false}
               />
             ) : (
               <img
                 src={`${STATIC_ASSETS}/brand/logo-with-text-dark.webp`}
                 className="-mb-0.5 h-6"
                 height={30}
+                width={110}
                 alt="tape"
                 draggable={false}
               />

@@ -1,7 +1,6 @@
 import '@radix-ui/themes/styles.css'
 
 import { Theme } from '@radix-ui/themes'
-import { useScreenSize } from '@tape.xyz/browser'
 import { ThemeProvider as NextTheme } from 'next-themes'
 import { type FC, type ReactNode } from 'react'
 
@@ -10,14 +9,9 @@ type Props = {
 }
 
 const ThemeProvider: FC<Props> = ({ children }) => {
-  const { isMobile, isTablet } = useScreenSize()
   return (
     <NextTheme defaultTheme="light" attribute="class">
-      <Theme
-        accentColor="gray"
-        scaling={isMobile ? '90%' : isTablet ? '95%' : '100%'}
-        radius="large"
-      >
+      <Theme accentColor="gray" radius="large">
         {children}
       </Theme>
     </NextTheme>

@@ -67,7 +67,7 @@ const UserMenu = () => {
           <Avatar
             size="2"
             radius="full"
-            src={getProfilePicture(activeProfile)}
+            src={getProfilePicture(activeProfile, 'AVATAR')}
             fallback={getProfile(activeProfile)?.slug[0] ?? ';)'}
             alt={getProfile(activeProfile)?.displayName}
           />
@@ -80,7 +80,7 @@ const UserMenu = () => {
               <Avatar
                 size="1"
                 radius="full"
-                src={getProfilePicture(activeProfile)}
+                src={getProfilePicture(activeProfile, 'AVATAR')}
                 fallback={getProfile(activeProfile)?.slug[0] ?? ';)'}
                 alt={getProfile(activeProfile)?.displayName}
               />

@@ -118,7 +118,7 @@ const QueuedVideo: FC<Props> = ({ queuedVideo }) => {
         <div className="flex items-start space-x-2.5">
           <img
             className="h-8 w-8 rounded-full"
-            src={getProfilePicture(activeProfile)}
+            src={getProfilePicture(activeProfile, 'AVATAR')}
             alt={getProfile(activeProfile)?.slug}
             draggable={false}
           />

@@ -43,7 +43,7 @@ const StreamCard: FC<Props> = ({ stream }) => {
       <div className="py-2">
         <Flex gap="2">
           <Avatar
-            src={getProfilePicture(stream.by)}
+            src={getProfilePicture(stream.by, 'AVATAR')}
             size="1"
             radius="full"
             fallback={getRandomProfilePicture(stream.by.ownedBy.address)}

@@ -19,7 +19,7 @@ import {
   getIsIPFSUrl,
   getMetadataCid,
   getProfileCoverPicture,
-  getProfilePicture,
+  getProfilePictureUri,
   getSignature,
   getValueFromKeyInAttributes,
   logger,
@@ -195,17 +195,20 @@ const VideoOptions: FC<Props> = ({ video, variant = 'ghost', children }) => {
 
     try {
       toast.loading(`Pinning video...`)
+      const pfp = getProfilePictureUri(activeProfile as Profile)
       const metadata: ProfileOptions = {
-        appId: TAPE_APP_ID,
-        coverPicture: getProfileCoverPicture(activeProfile),
-        id: uuidv4(),
         ...(activeProfile?.metadata?.displayName && {
-          name: activeProfile?.metadata?.displayName
+          name: activeProfile?.metadata.displayName
         }),
         ...(activeProfile?.metadata?.bio && {
-          bio: activeProfile?.metadata?.bio
+          bio: activeProfile?.metadata.bio
+        }),
+        ...(pfp && {
+          picture: pfp
         }),
-        picture: getProfilePicture(activeProfile as Profile),
+        appId: TAPE_APP_ID,
+        coverPicture: getProfileCoverPicture(activeProfile),
+        id: uuidv4(),
         attributes: [
           ...otherAttributes,
           {

@@ -42,7 +42,7 @@ const VideoCard: FC<Props> = ({ video }) => {
       <div className="py-2">
         <Flex gap="2">
           <Avatar
-            src={getProfilePicture(video.by)}
+            src={getProfilePicture(video.by, 'AVATAR')}
             size="2"
             radius="full"
             fallback={getProfile(video.by)?.displayName[0] ?? ';)'}

@@ -203,7 +203,7 @@ const Splits: FC<Props> = ({ submitContainerRef }) => {
                   >
                     <ProfileSuggestion
                       id={profile.id}
-                      pfp={getProfilePicture(profile)}
+                      pfp={getProfilePicture(profile, 'AVATAR')}
                       handle={getProfile(profile).slug}
                       followers={profile.stats.followers}
                       className="hover:bg-brand-50 text-left dark:hover:bg-black"

@@ -87,7 +87,6 @@ const Feed = () => {
     <div className="max-w-screen-ultrawide container mx-auto">
       <MetaTags title="Your Feed" />
       <CategoryFilters heading="Feed" subheading="Your Friends' Stories" />
-
       {loading && <TimelineShimmer className="laptop:pt-6 pt-4" />}
       {!error && !loading && (
         <>

@@ -35,7 +35,7 @@ const request: ExplorePublicationRequest = {
     }
   },
   orderBy: ExplorePublicationsOrderByType.LensCurated,
-  limit: LimitType.Fifty
+  limit: LimitType.Ten
 }
 
 const LatestBytes = () => {

@@ -183,7 +183,7 @@ const Authenticate = () => {
                 <Select.Item key={profile.id} value={profile.id}>
                   <Flex gap="2" align="center">
                     <Avatar
-                      src={getProfilePicture(profile)}
+                      src={getProfilePicture(profile, 'AVATAR')}
                       fallback={getProfile(profile)?.displayName[0] ?? ';)'}
                       radius="full"
                       size="1"

@@ -25,7 +25,7 @@ const Authenticated = () => {
           <Flex gap="3" align="center">
             <Avatar
               size="5"
-              src={getProfilePicture(activeProfile)}
+              src={getProfilePicture(activeProfile, 'AVATAR')}
               fallback={getProfile(activeProfile)?.slug[0] ?? ';)'}
               alt={getProfile(activeProfile)?.displayName}
             />

@@ -29,7 +29,7 @@ const Acted: FC<Props> = ({ notification: { publication, actions } }) => {
             <HoverableProfile profile={by} key={by?.id}>
               <img
                 className="h-7 w-7 rounded-full border dark:border-gray-700/80"
-                src={getProfilePicture(by)}
+                src={getProfilePicture(by, 'AVATAR')}
                 draggable={false}
                 alt={getProfile(by)?.slug}
               />

@@ -27,7 +27,7 @@ const Commented: FC<Props> = ({ notification: { comment } }) => {
             <HoverableProfile profile={comment.by} key={comment.by?.id}>
               <img
                 className="h-7 w-7 rounded-full border dark:border-gray-700/80"
-                src={getProfilePicture(comment.by)}
+                src={getProfilePicture(comment.by, 'AVATAR')}
                 draggable={false}
                 alt={getProfile(comment.by)?.slug}
               />

@@ -21,7 +21,7 @@ const Followed: FC<Props> = ({ notification: { followers } }) => {
             <HoverableProfile profile={profile} key={profile?.id}>
               <img
                 className="h-7 w-7 rounded-full border dark:border-gray-700/80"
-                src={getProfilePicture(profile)}
+                src={getProfilePicture(profile, 'AVATAR')}
                 draggable={false}
                 alt={getProfile(profile)?.displayName}
               />

@@ -29,7 +29,7 @@ const Mentioned: FC<Props> = ({ notification: { publication } }) => {
             <HoverableProfile profile={publication.by} key={publication.by?.id}>
               <img
                 className="h-7 w-7 rounded-full border dark:border-gray-700/80"
-                src={getProfilePicture(publication.by)}
+                src={getProfilePicture(publication.by, 'AVATAR')}
                 draggable={false}
                 alt={getProfile(publication.by)?.displayName}
               />

@@ -26,7 +26,7 @@ const Mirrored: FC<Props> = ({ notification: { mirrors, publication } }) => {
             <HoverableProfile profile={profile} key={profile?.id}>
               <img
                 className="h-7 w-7 rounded-full border dark:border-gray-700/80"
-                src={getProfilePicture(profile)}
+                src={getProfilePicture(profile, 'AVATAR')}
                 draggable={false}
                 alt={getProfile(profile)?.displayName}
               />

@@ -27,7 +27,7 @@ const Quoted: FC<Props> = ({ notification: { quote } }) => {
             <HoverableProfile profile={quote.by} key={quote.by?.id}>
               <img
                 className="h-7 w-7 rounded-full border dark:border-gray-700/80"
-                src={getProfilePicture(quote.by)}
+                src={getProfilePicture(quote.by, 'AVATAR')}
                 draggable={false}
                 alt={getProfile(quote.by)?.displayName}
               />

@@ -26,7 +26,7 @@ const Reactions: FC<Props> = ({ notification: { publication, reactions } }) => {
             <HoverableProfile profile={profile} key={profile?.id}>
               <img
                 className="h-7 w-7 rounded-full border dark:border-gray-700/80"
-                src={getProfilePicture(profile)}
+                src={getProfilePicture(profile, 'AVATAR')}
                 draggable={false}
                 alt={getProfile(profile)?.displayName}
               />

@@ -75,7 +75,7 @@ const MutualFollowers: FC<Props> = ({ viewing }) => {
           <div className="flex items-center space-x-1.5">
             <img
               className="h-5 w-5 rounded-full"
-              src={getProfilePicture(profile)}
+              src={getProfilePicture(profile, 'AVATAR')}
               alt={getProfile(profile)?.slug}
               draggable={false}
             />

@@ -19,7 +19,7 @@ import {
   EVENTS,
   getIsSensitiveContent,
   getProfileCoverPicture,
-  getProfilePicture,
+  getProfilePictureUri,
   getPublication,
   getPublicationData,
   getPublicationMediaUrl,
@@ -153,18 +153,21 @@ const PinnedVideo: FC<Props> = ({ id }) => {
 
     try {
       toast.loading(`Unpinning video...`)
+      const pfp = getProfilePictureUri(activeProfile as Profile)
       const metadata: ProfileOptions = {
-        appId: TAPE_APP_ID,
         ...(activeProfile?.metadata?.displayName && {
           name: activeProfile?.metadata?.displayName
         }),
         ...(activeProfile?.metadata?.bio && {
           bio: activeProfile?.metadata?.bio
         }),
+        ...(pfp && {
+          picture: pfp
+        }),
+        appId: TAPE_APP_ID,
         coverPicture: getProfileCoverPicture(activeProfile),
         id: uuidv4(),
         name: activeProfile?.metadata?.displayName ?? '',
-        picture: getProfilePicture(activeProfile as Profile),
         attributes: [
           ...otherAttributes,
           {

@@ -21,13 +21,11 @@ const VideoCardShimmer = () => {
     <div className="w-full rounded-xl">
       <div className="flex animate-pulse flex-col">
         <div className="aspect-w-16 aspect-h-9 rounded-medium bg-gray-200 dark:bg-gray-800" />
-        <div className="flex space-x-2 py-3">
-          <div className="flex-1 space-y-2">
-            <div className="flex items-center space-x-2">
-              <div className="h-6 w-6 rounded-full bg-gray-200 dark:bg-gray-800" />
-              <div className="h-3 w-full flex-1 rounded bg-gray-200 dark:bg-gray-800" />
-            </div>
-            <div className="h-3 rounded bg-gray-200 dark:bg-gray-800" />
+        <div className="flex space-x-2 py-2">
+          <div className="h-8 w-8 flex-none rounded-full bg-gray-200 dark:bg-gray-800" />
+          <div className="flex w-full flex-col space-y-2">
+            <div className="h-3 w-full rounded-md bg-gray-200 dark:bg-gray-800" />
+            <div className="h-3 w-full rounded-md bg-gray-200 dark:bg-gray-800" />
           </div>
         </div>
       </div>

@@ -57,7 +57,7 @@ const InputMentions: FC<Props> = ({
           id: profile.handle?.fullHandle,
           display: getProfile(profile)?.displayName,
           profileId: profile.id,
-          picture: getProfilePicture(profile),
+          picture: getProfilePicture(profile, 'AVATAR'),
           followers: profile.stats.followers
         }))
         callback(channels)

@@ -28,6 +28,7 @@ const Login = () => {
                 src={`${STATIC_ASSETS}/brand/logo-with-text-dark.webp`}
                 className="h-10"
                 alt="tape"
+                width={200}
                 height={30}
                 draggable={false}
               />
@@ -36,6 +37,7 @@ const Login = () => {
                 src={`${STATIC_ASSETS}/brand/logo-with-text-light.webp`}
                 className="h-10"
                 alt="tape"
+                width={200}
                 height={30}
                 draggable={false}
               />