Paths

Table of Contentst

Differential D16524

[e.cash] Play animations on mining and staking only once
ClosedPublic
Actions

Authored by Kronkmeister on Jul 23 2024, 11:46.

Details

Reviewers

bytesofman

Group Reviewers

Restricted Project

Commits

rABCc95d61841611: [e.cash] Play animations on mining and staking only once

Summary

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.

Test Plan

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

Repository

rABC Bitcoin ABC

Branch

master

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 29671
Build 58877: Build Diff
Build 58876: arc lint + arc unit

Event Timeline

Kronkmeister created this revision.Jul 23 2024, 11:46

Herald added a reviewer: Restricted Project. · View Herald TranscriptJul 23 2024, 11:46

Kronkmeister requested review of this revision.Jul 23 2024, 11:46

Harbormaster completed remote builds in B29671: Diff 48788.Jul 23 2024, 11:46

@bot preview-e.cash

teamcity awarded a token.Jul 23 2024, 11:48

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.

@bot preview-e.cash

teamcity updated a token.Jul 24 2024, 09:37

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.

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
10
29
31
web/e.cash/pages/mining.js
42
web/e.cash/pages/staking.js
19

This revision now requires changes to proceed.Jul 24 2024, 10:27

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.

Harbormaster completed remote builds in B29790: Diff 48936.Jul 30 2024, 16:22

@bot preview-e.cash

teamcity updated a token.Jul 30 2024, 16:27

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 1

@bot preview-e.cash

teamcity updated a token.Jul 30 2024, 17:26

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

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 1

@bot preview-e.cash

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.

bytesofman accepted this revision.Jul 31 2024, 12:19

This revision is now accepted and ready to land.Jul 31 2024, 12:19

Closed by commit rABCc95d61841611: [e.cash] Play animations on mining and staking only once (authored by Kronkmeister). · Explain WhyJul 31 2024, 14:11

This revision was automatically updated to reflect the committed changes.

Kronkmeister added a commit: rABCc95d61841611: [e.cash] Play animations on mining and staking only once.