Making animations on /mining and /staking to play only once because they do not have a closed loop, leading to jumpy animations. /index needed to be changed to make it work. Added NoLoop param as a new option for image animations.
Details
Details
- Reviewers
bytesofman - Group Reviewers
Restricted Project - Commits
- rABCc95d61841611: [e.cash] Play animations on mining and staking only once
visit e.cash/mining and e.cash/staking and see if animation plays only once. Check out other animations on the page to double check they are not affected by this change.
Diff Detail
Diff Detail
- Repository
- rABC Bitcoin ABC
- Lint
Lint Not Applicable - Unit
Tests Not Applicable
Event Timeline
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://51.83.66.92:41745 for the next 60 minutes.
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://54.39.19.73:41303 for the next 60 minutes.
Comment Actions
This breaks some existing images. For example, the wallet animation in the wallets page is currently a "reverse" loop -- coins go in, out, in, etc. After this, they "reset" every time.
The code is currently organized so that animations either loop or reverse loop. We are looking to add a feature where animations may also not loop at all.
I think the change is good and this would be nice to have. But, this implementation is confusing (loop=!reverse is already confusing...but it's basically saying "look, we either loop, or we reverse loop" ... whereas with this diff as-is, now we are either looping or stopping, breaking the reverse feature).
We should add noLoop as a param, since it is a new option for image animations.
In addition to the in-line changes recommended above, also need to change components/sub-page-hero/index.js to be
// Copyright (c) 2023 The Bitcoin developers
// Distributed under the MIT software license, see the accompanying
// file COPYING or http://www.opensource.org/licenses/mit-license.php.
import VideoBackground from '/components/videobackground';
import AnimateImage from '/components/animate-image';
import H2 from '/components/h2';
import { Container } from '/components/atoms';
import { HeroCtn, ImgCtn, TextCtn, OuterHeroCtn } from './styles';
export default function SubPageHero({
image, // lottie json file to use in the AnimateImage component
imagespeed, // optional number value to adjust animation speed
imagereverse, // optional boolean value to allow animation to play forwards and back instead of a loop
h2subtext, // h2 subheadline string
h2text, // h2 text string
children, // any children
noLoop = false, // Only play the animation one time
}) {
return (
<OuterHeroCtn>
<VideoBackground videoname="blue-abstract" />
<Container>
<HeroCtn>
<ImgCtn>
<AnimateImage
image={image}
speed={imagespeed}
reverse={imagereverse}
noLoop={noLoop}
/>
</ImgCtn>
<TextCtn>
<H2 subtext={h2subtext} text={h2text} />
{children}
</TextCtn>
</HeroCtn>
</Container>
</OuterHeroCtn>
);
}then test with npm run dev to confirm expected behavior
| web/e.cash/components/animate-image/index.js | ||
|---|---|---|
| 9 ↗ | (On Diff #48788) | |
| 10 ↗ | (On Diff #48788) | |
| 29 ↗ | (On Diff #48788) | |
| 31 ↗ | (On Diff #48788) | |
| web/e.cash/pages/mining.js | ||
| 42 ↗ | (On Diff #48788) | |
| web/e.cash/pages/staking.js | ||
| 19 ↗ | (On Diff #48788) | |
Comment Actions
Added noLoop param in sub-page-hero as a new option for image animations, allowing for animations to be played only once.
Changed mining and staking to use noLoop instead of !imagereverse.
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) failed.
Tail of the build log:
#7 [3/5] COPY next.preview.js next.config.js
#7 sha256:62fde084d741b050e64190df5c52f1e38c382bf44d9da340ffbe2f1f1c06246c
#7 DONE 0.0s
#8 [4/5] RUN npm ci
#8 sha256:c3deb33a65e672f9617a493f271d0f3c6e33bf3230f8577bd39dd340800e4a50
#8 9.901
#8 9.901 added 818 packages, and audited 819 packages in 9s
#8 9.901
#8 9.901 154 packages are looking for funding
#8 9.901 run `npm fund` for details
#8 9.902
#8 9.902 found 0 vulnerabilities
#8 9.902 npm notice
#8 9.902 npm notice New minor version of npm available! 10.7.0 -> 10.8.2
#8 9.902 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
#8 9.902 npm notice To update run: npm install -g npm@10.8.2
#8 9.902 npm notice
#8 DONE 10.4s
#9 [5/5] RUN npm run build
#9 sha256:7ea8b7965b391f7a18dfe7eac495f5526ff1b484456b04459697ac7d861e0eea
#9 0.538
#9 0.538 > e.cash@0.0.1 build
#9 0.538 > next build
#9 0.538
#9 1.017 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#9 1.017 This information is used to shape Next.js' roadmap and prioritize features.
#9 1.017 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#9 1.017 https://nextjs.org/telemetry
#9 1.017
#9 1.070 ▲ Next.js 14.2.5
#9 1.070 - Environments: .env
#9 1.070
#9 1.071 Linting and checking validity of types ...
#9 2.517 Creating an optimized production build ...
#9 11.65 ✓ Compiled successfully
#9 11.65 Collecting page data ...
#9 72.45 Error: SyntaxError: Unexpected token '<', "<html>
#9 72.45 <h"... is not valid JSON
#9 72.45 at i (/.next/server/pages/blog/[slug].js:1:1652)
#9 72.45 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
#9 72.45 at async a (/.next/server/pages/blog/[slug].js:1:1694)
#9 72.45 at async u (/.next/server/pages/blog/[slug].js:1:2715)
#9 72.45 at async buildStaticPaths (/node_modules/next/dist/build/utils.js:788:33)
#9 72.45 at async /node_modules/next/dist/build/utils.js:1220:110
#9 72.45 at async Span.traceAsyncFn (/node_modules/next/dist/trace/trace.js:154:20)
#9 72.45
#9 72.45 > Build error occurred
#9 72.45 Error: Failed to collect page data for /blog/[slug]
#9 72.45 at /node_modules/next/dist/build/utils.js:1268:15
#9 72.45 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
#9 72.45 type: 'Error'
#9 72.45 }
#9 ERROR: executor failed running [/bin/sh -c npm run build]: exit code: 1
------
> [5/5] RUN npm run build:
------
executor failed running [/bin/sh -c npm run build]: exit code: 1
Build preview-e.cash failed with exit code 1Comment Actions
looks like strapi.fabien.cash is down, so the build preview won't work at the moment. Otherwise diff looks good.
Will wait on server to be up before green so we can test the build and be sure
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) failed.
Tail of the build log:
#7 [3/5] COPY next.preview.js next.config.js
#7 sha256:fb999e24fa1889d04c0d1f2ec311182f3c83297ab925b352fd9a41192943359c
#7 DONE 0.1s
#8 [4/5] RUN npm ci
#8 sha256:3a99ef8965eda2fb686d0225cf13f499d67679b9fe082050b6cf1df20110d860
#8 8.812
#8 8.812 added 818 packages, and audited 819 packages in 8s
#8 8.812
#8 8.812 154 packages are looking for funding
#8 8.812 run `npm fund` for details
#8 8.813
#8 8.813 found 0 vulnerabilities
#8 8.813 npm notice
#8 8.813 npm notice New minor version of npm available! 10.7.0 -> 10.8.2
#8 8.813 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
#8 8.813 npm notice To update run: npm install -g npm@10.8.2
#8 8.813 npm notice
#8 DONE 9.2s
#9 [5/5] RUN npm run build
#9 sha256:f0db84b661444706c49195c0278a866bf103e02743be7a820627474fc6a2b81c
#9 0.561
#9 0.561 > e.cash@0.0.1 build
#9 0.561 > next build
#9 0.561
#9 1.018 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#9 1.018 This information is used to shape Next.js' roadmap and prioritize features.
#9 1.018 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#9 1.018 https://nextjs.org/telemetry
#9 1.018
#9 1.081 ▲ Next.js 14.2.5
#9 1.081 - Environments: .env
#9 1.081
#9 1.082 Linting and checking validity of types ...
#9 2.424 Creating an optimized production build ...
#9 10.81 ✓ Compiled successfully
#9 10.81 Collecting page data ...
#9 12.55 Error: SyntaxError: Unexpected token '<', "<html>
#9 12.55 <h"... is not valid JSON
#9 12.55 at i (/.next/server/pages/blog/[slug].js:1:1652)
#9 12.55 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
#9 12.55 at async a (/.next/server/pages/blog/[slug].js:1:1694)
#9 12.55 at async u (/.next/server/pages/blog/[slug].js:1:2715)
#9 12.55 at async buildStaticPaths (/node_modules/next/dist/build/utils.js:788:33)
#9 12.55 at async /node_modules/next/dist/build/utils.js:1220:110
#9 12.55 at async Span.traceAsyncFn (/node_modules/next/dist/trace/trace.js:154:20)
#9 12.55
#9 12.55 > Build error occurred
#9 12.55 Error: Failed to collect page data for /blog/[slug]
#9 12.55 at /node_modules/next/dist/build/utils.js:1268:15
#9 12.55 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
#9 12.55 type: 'Error'
#9 12.55 }
#9 ERROR: executor failed running [/bin/sh -c npm run build]: exit code: 1
------
> [5/5] RUN npm run build:
------
executor failed running [/bin/sh -c npm run build]: exit code: 1
Build preview-e.cash failed with exit code 1Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://51.83.66.92:41915 for the next 60 minutes.