dgurns / gig-window Goto Github PK

As new users try out GigWindow they'll probably have questions, so it would be great to write up some common guides in the Wiki.

Things like:

• How do I get a refund for a payment?
• How do I broadcast from my iPhone?
• How do I add a profile picture?

Feel free to organize the wiki as you see fit! Thank you for helping out 👍

Is your feature request related to a problem? Please describe.
Currently in a given chat box, you can only see the latest 10 chats and latest 10 payments. However when you scroll back you should be able to view older chats + payments.

Describe the solution you'd like
Autoload older chat events when scroll position is near the top of the chat box.

Describe alternatives you've considered
Could do a “Load more” button after the oldest chat, but why force an extra click?

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
Currently it's not easy to post emojis in chat. And if you do post one, it's really small.

Describe the solution you'd like
There should be an emoji picker in the bottom right of the "Enter chat" textarea. Clicking it should ideally toggle your system emoji picker, or perhaps a manual selection of the top 4 or 5 emojis. If you post a single emoji as a chat, it should be blown up like it is on Whatsapp.

Describe alternatives you've considered
It would be best to trigger the system picker as a v1. Building a custom picker sounds more involved.

Additional context

Is your feature request related to a problem? Please describe.
If you arrive to an upcoming show that you want to watch, it can be hard to remember the date/time. You would have to manually put it in your calendar.

Describe the solution you'd like
An "Add to calendar" icon. Clicking it downloads an ics file that you can easily add to your calendar. (Check https://apple.com/apple-events for an example)

Describe alternatives you've considered
There are some plugins or packages which do this but I suspect they are heavier than needed. Probably easiest to build something simple.

Additional context

• Think about how this works when there are multiple upcoming shows. Where does the icon sit?

Update:

• Site for making sample .ics files: https://ical.marudot.com/

Is your feature request related to a problem? Please describe.
If someone has more than one show coming up, you can only see the next one.

Describe the solution you'd like
Add a way to see upcoming shows if there is more than one. To start with, possibly this could be a dropdown near where the next show is currently listed. It could also be a modal.

Describe alternatives you've considered
This should be as minimal as possible and not clutter the page.

Additional context
Some questions include:

• Should there be options to buy tickets for upcoming shows? Does that lead to any other complications or confusion?
• How about a simple "Add to calendar" icon? How would that fit in with this display?

Is your feature request related to a problem? Please describe.
Now that we have unit tests, we should run them on any open PRs before a PR can be merged.

Describe the solution you'd like

• Add a Github Actions workflow to run tests on every commit to an open PR. Tests must pass before the PR can be merged.
• Try integrating 'msw' to avoid repeated mocked Apollo responses
• Try using ts-jest and write tests in Typescript

Describe alternatives you've considered

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
Currently we're using create-react-app, but NextJS offers an improved developer experience and the SEO benefits of server-side rendering.

Describe the solution you'd like

• Reimplement the web app with NextJS
• The biggest change is to routing - we'll have to use NextJS's built in routing solution
• May want to update how we fetch data on user pages and the homepage to take advantage of server side rendering
• May need to do something related to Material UI server-side styles... see https://github.com/dgurns/wedding/blob/master/pages/_document.js#L4
• Aside from that, it might not be too bad since it's all Typescript/React

Describe alternatives you've considered

• If this turns into a massive task, may want to just forget it.

Additional context

Is your feature request related to a problem? Please describe.
When you're visiting https://gigwindow.com, it's hard to know what version you're looking at.

Describe the solution you'd like

• Put the version number in the footer, ie. the sha that the deployment represents
• Perhaps link it to the commit's state of the codebase on Github
• Make this all automated

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.
If I'm an artist or venue who has a personal site which receives significant traffic, I might want to have my shows embedded on my own site rather than on a separate GigWindow page.

Describe the solution you'd like
An embeddable player. I would like to be able to copy/paste an iframe snippet into my own site, and have the live video, chat, and tickets/tips included.

Describe alternatives you've considered

Additional context

• I don't think we can set third-party cookies from within an iframe, so chatting and saved payment information wouldn't work.
• Perhaps it would be a unique component which simply shows the live video/chat with a large "Pay what you want" button which opens the user's GigWindow page in a new tab.
• Not sure how we could handle free preview without cookies. Perhaps we could set a timeout for 5 minutes, or mute the audio in the iframe to push the user to click through to GigWindow.
• Maybe the approach is to go super simple and literally just have the video with a large overlay that says "Live now on GigWindow - Pay what you want to join" and navigates to the user's GigWindow page.

Is your feature request related to a problem? Please describe.
It would be great to add an Apple Pay option (and later, Android Pay) so there is less friction when paying.

Describe the solution you'd like

• When a user enters the amount they'd like to pay, they get to choose "Pay with card" or "Pay with Apple Pay"
• Only see Apple Pay option if it's supported on their device... otherwise just show the card form by default
• May need to conditionally load the Stripe JS bundle since it's initialized with GigWindow client ID, and needs to be the user's client ID for Apple Pay (need to look into this more)

Describe alternatives you've considered

• Paypal (can't do thru Stripe, so requires a bunch more work)
• Android Pay (guessing won't be as widespread as Apple Pay - this could also use more research)

Additional context

• https://stripe.com/docs/stripe-js/elements/payment-request-button#react-using-with-connect

To do:

• Verify domains with Apple Pay
• Rename createPayment resolver to chargeCardAsPayee and update code
• Add a createStripePaymentIntentAsPayee resolver
• Add a createPayment resolver
• In PaymentForm, first check for saved card. If exists, show "Pay with saved card" button only
• If not, show "Pay with Apple Pay" button (if canMakePayment) and "Pay with card" form
• Wrap "Pay with Apple Pay" in Stripe Elements initialized as payee's Stripe account
• Wrap "Pay with card" in Stripe Elements initialized as GigWindow's Stripe account
• Make necessary calls to complete "Pay with Apple Pay" flow
  • Create paymentRequest instance on client
  • createPaymentIntentAsPayee backend call
  • confirmCardPayment on client with payment method ID
  • createPayment backend call
• When payment is completed, hide payment dialog

Describe the bug

To Reproduce
Go to a page with an upcoming show

Expected behavior
The button and text should be centered vertically

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information, if applicable):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
We need to start adding tests for functionality. Especially anytime a bug is fixed, we should add a test for it.

Describe the solution you'd like

• Set up React Testing Library in the project and write a first test
• Research msw library for mocking API requests and see if it works with GraphQL

Describe alternatives you've considered
RTL is great

Additional context
n/a

Is your feature request related to a problem? Please describe.
If a user is editing or deleting a show, but tickets have been already sold, they should be warned about it.

Describe the solution you'd like

• When clicking "Edit" or "Delete" on a show with tickets attached, show a confirm dialog warning the user.

Describe alternatives you've considered

• Eventually, would be good to add a related option to refund all tickets to a show if you are going to delete it.

Additional context

Is your feature request related to a problem? Please describe.
As the broadcaster of a page, I might want or need to moderate messages in chat.

Describe the solution you'd like
Some kind of button or action to be able to:

• Hide a particular chat
• Hide a particular user

Describe alternatives you've considered
There are a number of ways to go about this. It would probably be best to have a small "more" icon that appears when you mouse over a chat, although you'd also want it to be accessible when tapping a chat on mobile.

I like the idea of giving each person agency over how they handle moderation. So if you hide a user, you don't see their chats anywhere on GigWindow. And, if you hide them, nobody can see their chats on your page. So essentially your scope as a user extends to 1) your own experience and 2) everyone's experience on your own page.

Additional context

Is your feature request related to a problem? Please describe.
If an admin tries to view a show, whether it's to monitor the stream or help with tech, currently they have to pay to watch.

Describe the solution you'd like
Don't show paywalls for an Admin user

Describe alternatives you've considered
I suppose you could make admins pay to watch, but that means it's cost prohibitive for them to monitor shows and help out.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
If we want to horizontally scale the API via a load balancer, we'll need to use a centralized Redis instance.

Describe the solution you'd like
Configure production to use a centralized Redis instance with password. Local and staging should continue using a local instance of Redis via docker-compose

Describe alternatives you've considered
One alternative is to vertically scale the backend, but I suspect horizontal scaling will be a better idea, due to probable limits on simultaneous websocket connections per server, cost, and redundancy.

Additional context

Is your feature request related to a problem? Please describe.
As people join the platform, it can be hard to find their pages.

Describe the solution you'd like
Add a search element to the header. For now it can probably be a simple search that matches urlSlug or username and goes to a simple search results page.. or even a live dropdown. In fact the dropdown might be the most minimal and direct.

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.
Users will probably want to have a section on their page where they can share info, links, and any other things they want to display.

Describe the solution you'd like
A free text field in "Edit Profile" where users can enter Markdown. The output will appear on their page below the video and chat. While they are entering their Markdown they should have a preview interface to see what it will look like.

Describe alternatives you've considered
Text only... but that's very limiting. Markdown gives a lot of freedom to the user and also makes the feature easier to build.

Additional context
Probably will want to use react-markdown

Is your feature request related to a problem? Please describe.
If you're playing a show, the main thing you're probably paying attention to is the chats. However, the chat box is fairly small by default. It would be great to be able to see chats more easily.

Describe the solution you'd like
Add a UI option to expand the chat box and/or make the chats bigger.

Describe alternatives you've considered

• Should this be only for broadcasting or also for viewing?
• Ideally this should be responsive to screen size and expand to fill available space
• As an MVP, could default the Dashboard to show 40% width video and 60% width chat. This would be the quickest solution.

Additional context

Describe the bug
For a LiveNowCard appearing after showtime, it should include the show title if the relevant show is active. Currently, the title is not appearing. Also, if the user has no image set, the title and username should be left-aligned in the card.

To Reproduce
Steps to reproduce the behavior:

1. Create a show
2. After showtime, go live
3. Look at LiveNowCard on homepage
4. Card doesn’t include show title

Expected behavior
see above

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser [e.g. chrome, safari] Brave
• Version [e.g. 22]

Smartphone (please complete the following information, if applicable):

• Device: [e.g. iPhone6] iPhone 11
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari] Safari
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
If a fan clicks "Pay what you want" on an embedded player, they are directed to the user's GigWindow profile, but not presented with an immediate call to action.

Describe the solution you'd like
After clicking on "Pay what you want" in an embedded player, upon arriving to the GigWindow page, a fan should be presented with an open "Name your price" dialog. This can probably be accomplished via a query param like ?showPaymentDialog=true

Describe alternatives you've considered
One alternative is just not doing this at all. Maybe it's obvious enough to visitors what to click next. Testing this in real life usage would probably be a good idea.

Additional context

Is your feature request related to a problem? Please describe.
When watching a show, you want to see how many other people are watching too.

Describe the solution you'd like
A scalable way to fetch current realtime viewers on a given user page.

Describe alternatives you've considered
A few possible ways to do this, and probably others I haven't thought of yet:

• Utilize the Redis subscriptions package (graphql-redis-subscriptions) we're using for GraphQL subscriptions, since it keeps track of how many users are currently connected to a given artist page.
• Use Google Analytics and query their realtime API

Additional context

• This might be what we need to query: https://redis.io/commands/pubsub#pubsub-channels-pattern

Update:

• Can probably use Redis sorted sets. https://redis.io/commands/zadd
  • Client app sends a ping every minute with the current user ID and urlSlug they're on.
  • Add to Redis sorted set saved under the route like urlSlug
  • When adding, delete all keys over a minute old.
  • Get count for sorted set - this will represent all pings within the last minute.
  • Can use that as an estimate for the number of users currently on page.
  • Can probably do this within the same request/response: Send request with userId and urlSlug, get response with number of current viewers

Is your feature request related to a problem? Please describe.
When someone is looking at their user dashboard and getting ready to stream, it can be confusing to know which URL to share to their fans.

Describe the solution you'd like

• Some kind of sharing UI so they can easily copy their page URL and share it to fans (needs design)

Describe alternatives you've considered

• The URL to share may be obvious enough to people already and we don't need this button, so keep an eye on that...

Additional context

Is your feature request related to a problem? Please describe.
A number of venues have expressed a desire to set a minimum price for access to shows.

Describe the solution you'd like
From the broadcaster perspective, ideally when you create a show you could set a minimum monetary threshold for viewing it. The "Buy Ticket" dialog would then say "$5 or more" when the user is naming their price.

Describe alternatives you've considered
Currently, shows are $1 minimum. In practice that means if a user has paid $1 or more within 24 hours of showtime, OR if they have specifically purchased a ticket to that show, they have access.

This gets complicated when you factor in tipping. If a show is $5 minimum, but someone has tipped $5 within the last 24 hours, should they have access? (I would assume so). If someone has tipped $3, would they have access? (I assume not). What happens if you want to change the price of the show after it's initially created?

Need to think that all through.