make upload post page

[2blo]

image

• [x] 2 url or file-->cms or reddit upload link

video

• [x] youtube upload link
• [ ] ~warning: length + sfx~ - overkill
• [x] 2 url

common

• [x] title
• [x] desc
• [x] upload
• [ ] ~warning: resolution~ - overkill

Solution

use the same page, just change the content based on if you enter url or file

• [x] make submit button sign you in
• [x] style field based on validity
• [x] make sure entire page fits without scrolling
• [x] after + before comes on top of tile + desc - use value
• [x] after + before on 1 line, align before with with following fields
• [x] desc text field
• [x] customize z warning text "string must contain..." --> "title must contain..."
• [x] upload feedback animation
• [x] custom z validator for reddit / youtube - id matcher should be in the backend - generally not needed in client unless malicious.
• [x] trim yt url before submitting
• [ ] build thumbnail "thumbnail"
• [ ] check image validity with onError
• [ ] check youtube video validity with thumbnail query
• [x] verify that optional desc is ok ( "" or undefined? )
• [ ] preventDefault() for onsubmit

client side video / image warning

• [ ] when click submit
• [ ] determine if youtube or image (if match youtube regex)
• [ ] if youtube, get id --> thumbnail link
• [ ] if not, match whitelisted domains?
• [ ] if valid domain, try to get image, onError set invalid
• [ ] if not valid domain or video id, set invalid

if missing:

• gray youtube player - ok
• small missing image icon for reddit - mess up aspect so we should fix

[2blo]

• no need to do id / image "exist" check in the backend - would only be issue for malicious users
• image always suceeds with unoptimized
• image never succeeds without unoptimized

too complicated, lets just check with the regex + domain matcher for now, users can just edit the post if the link is incorrect

• nextjs image has optimizations that we want, but you have to whitelist the domain, it is a fine tradeoff.

[2blo]

cubic ease

[2blo]

store the form state as localStorage, not cookies, cookies are sent to the server, which we do not need.

current problem, either:

• storage not deleted on submit
• or values not updated frequently, try hook again, or usecallback...

  done, had to use useform.watch