Page MenuHomePhabricator

[e.cash] add video background component
ClosedPublic

Authored by johnkuney on Apr 13 2023, 19:23.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Commits
rABC629712f81ab6: [e.cash] add video background component
Summary

The site uses video backgrounds in several places. Adding a reusable component that can take the name of video file and render it

Test Plan

preview the site and see how it looks

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

web/e.cash/components/videobackground/index.js
5 ↗(On Diff #39714)

last chance to use styled components instead of <div className={} everywhere :|

7 ↗(On Diff #39714)

will all videos be mp4? will all videos come from /videos/?

web/e.cash/components/videobackground/videobackground.module.css
19 ↗(On Diff #39714)

Is this just matching what's in webflow? Some other value?

Thinking -- how easy / difficult will it be to change this for a new theme?

Probably better if we have a theme file or some kind of reference that stores these values as variables where they are easy to change later.

web/e.cash/components/videobackground/index.js
5 ↗(On Diff #39714)

lol you love those styled components! I dont mind classnames....

7 ↗(On Diff #39714)

yeah thought about that, could import the video in the parent and pass the whole thing as a prop...or just pass the full src path as a string... but I figured this would eliminate that import line and yes planning on all videos being mp4s and stored in the videos folder for this....and the whole string would be messier. Which do you like?

web/e.cash/components/videobackground/videobackground.module.css
19 ↗(On Diff #39714)

fair enough. Are we talking any possible theme or just the stealth theme? Stealth theme likely wont even use this video component....not stealthy enough

web/e.cash/components/videobackground/index.js
5 ↗(On Diff #39714)

Doesn't have to be in this diff but we should probably implement styled components. The main advantage is having component styling depend on state. So you could, for example, change the color or the font or the styling of the "price" area if price is up more than 10% in the last 24 hrs. This type of thing is much easier with styled components.

It also isn't all or nothing. You could have styled components and use it only for more complicated styling like this. So, really is dev preference. It's not high priority for the whole repo to be styled components.

7 ↗(On Diff #39714)

Hard to say with only one video. Just need to be aware of anything that is a "system" and how future examples of this system need to be added.

web/e.cash/components/videobackground/videobackground.module.css
19 ↗(On Diff #39714)

Yeah for this one -- not relevant to this diff -- but unlike styled components it would be a real pain in the ass to come back in 2 months and try to drop in a new theme. Need to hunt down every single hard coded color.

You can check out the theme implementation in Cashtab. We haven't changed the theme yet. But it's still much easier to do styling if you have your color pallette in its own place. Then you're not constantly referencing "what's that hex color code again for a subheader .... "

So -- need to get a task and a diff up soon for replacing at least all colors with variables.

This revision is now accepted and ready to land.Apr 14 2023, 03:13
This revision was automatically updated to reflect the committed changes.