Create GIF preview video [1 XMR] [postponed]

[woodser]

This issue requests creating a brief (~30 seconds) GIF video preview of using Haveno, which can be posted to the official website and/or GitHub repo.

The video must demonstrate using the official stagenet network, and should include:

• Starting the application
• Creating a payment account
• Posting an offer
• Taking a trade
• Clicking the buttons to confirm payment sent/received
• Showing the trade completion screen
• Briefly showing screens under Funds (maybe make a withdraw tx?)
• Briefly showing screens under Settings
• Briefly showing screens under Account

Please use light mode instead of dark mode.

UPDATE: This issue is postponed until #1351 is complete, which redesigns part of the UI.

[github-actions]

There is a bounty on this issue. The amount is in the title. The reward will be awarded to the first person or group of people whose solution is accepted and merged.

In some cases, we may assign the issue to specific contributors. We expect contributors to provide a PR in a reasonable time frame or, in case of an extensive work, updates on their progress. We will unassign the issue if we feel the assignee is not responsive or has abandoned the task.

Read the full conditions and details of our bounty system.

[preland]

I can do this

[woodser]

We're actually working on a redesign of part of the UI: #1351

So it would be best to hold off on this issue until #1351 is complete.

[preland]

Ok, sounds good 👍

[preland]

What are the preferences in terms of quality for the gif (resolution, file size, etc.) ?

[preland]

I do not think the GIF format would be best for our use case

[woodser]

Open to recommendations.

[TheTollingBell]

@woodser I'm good to make a video and a gif of similar quality but I do agree that adding a gif to the website will make loading times pretty bad. Additionally, the accepted max length of gifs is usually around 10s.

[TheTollingBell]

@woodser Just captured the raw footage. Would you prefer a perspective from seller or buyer or both?

[woodser]

Was thinking the video would be hosted on GitHub, so not too concerned with loading time. Great if we can convey most of the flow in ~10 seconds, but overage is ok too. Or maybe we don't use GIF for the final hosted format.

It should be the taker flow, ideally buyer as taker.

[TheTollingBell]

Okay, I'm going to edit down the taker flow to around 10sec. I'll post a demo here in about 2hrs hopefully.

[preland]

I’ll be able to post what I have in around 3-4 hours

[TheTollingBell]

@woodser This is the mp4 for you to review. I had to cut out the majority of the process to fit it within 20 secs. If you want this is definitely convertible to a gif. I also have footage on the rest of Haveno such as the account creation process, clicking through the other tabs, and creating a trade.

haveno.mp4

[woodser]

Thanks @TheTollingBell, this is a good step. Viewing the video, I had these thoughts:

• Screen resolution should be decreased so everything is bigger.
• Show the Buy > Fiat | Crypto | Other submenus briefly so assets are shown, and then switch to Sell > Fiat briefly.
• It should show creating a payment account.
• Please show the "Trade completed successfully" popup, which happens after the close button is clicked for finality. This will require the "Do not show" popup settings to be reset which can be done in the application settings.
• It would be nice if additional offers were posted for more context.
• Possible to make the video higher quality, so the text is more legible? Decreasing screen resolution may help.

[TheTollingBell]

Okay, I'll have these changes recorded and posted by tonight EST. I'm assuming with these changes that the length of the video is okay to be around 30s-40s. I'm also planning on recording in 1920x1080 this time which should be better.

[preland]

I might as well show what I had made; it shows everything in Haveno from starting it up to completing a trade:

haveno2.mp4

If it appears to have a poor bitrate (or doesn't load in your browser), that's because it is currently encoded with h265 with a high compression rate (I did this so I could quickly upload the video for preview, as the video is 2 and a half minutes long and would otherwise not be uploadable here)

The video can be spliced into smaller clips, potentially with some sections showing in different areas than others, or for use in a tutorial.

[TheTollingBell]

Sorry to be off-topic but is that sway-effects or Hyprland, because I love the border config.

[preland]

It’s hyprland :)