Skip to content

Optimize create.js Ticker with idle throttling and tab visibility handling #5800

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stutijain2006 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Optimize create.js Ticker with idle throttling and tab visibility handling #5800

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d342a63
Optimize create.js ticker with idle throttling and tab visibility han…
stutijain2006 Feb 18, 2026
5396a38
Prettier on activity.js
stutijain2006 Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,7 +568,6 @@
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);

createjs.Ticker.framerate = 60;
// createjs.Ticker.addEventListener("tick", stage); // Managed by Activity class
}
document.addEventListener("DOMContentLoaded", init);
Expand Down
104 changes: 57 additions & 47 deletions js/activity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2247,7 +2247,7 @@ class Activity {
const changeText = () => {
const randomLoadMessage =
messages.load_messages[
Math.floor(Math.random() * messages.load_messages.length)
Math.floor(Math.random() * messages.load_messages.length)
];
document.getElementById("messageText").innerHTML = randomLoadMessage + "...";
counter++;
Expand Down Expand Up @@ -2931,6 +2931,15 @@ class Activity {
let lastActivity = Date.now();
let isIdle = false;

document.addEventListener("visibilitychange", () => {
if (document.hidden) {
createjs.Ticker.paused = true;
} else {
createjs.Ticker.paused = false;
resetIdleTimer();
}
});

// Wake up function - restores full framerate
const resetIdleTimer = () => {
lastActivity = Date.now();
Expand All @@ -2950,8 +2959,7 @@ class Activity {
window.addEventListener("wheel", resetIdleTimer);

// Periodic check for idle state
setInterval(() => {
// Check if music/code is playing
const idleCheck = () => {
const isMusicPlaying = this.logo?._alreadyRunning || false;

if (!isMusicPlaying && Date.now() - lastActivity > IDLE_THRESHOLD) {
Expand All @@ -2961,10 +2969,13 @@ class Activity {
console.log("⚡ Idle mode: Throttling to 1 FPS to save battery");
}
} else if (isIdle && isMusicPlaying) {
// Music started playing - wake up immediately
resetIdleTimer();
}
}, 1000);

setTimeout(idleCheck, 1000);
};

setTimeout(idleCheck, 1000);

// Expose activity instance for external checks
if (typeof window !== "undefined") {
Expand Down Expand Up @@ -3341,9 +3352,9 @@ class Activity {
that.blocks.moveBlock(
newBlock,
(x || that.blocksContainer.x + 100) -
that.blocksContainer.x,
that.blocksContainer.x,
(y || that.blocksContainer.y + 100) -
that.blocksContainer.y
that.blocksContainer.y
);
}
);
Expand Down Expand Up @@ -4795,8 +4806,8 @@ class Activity {
console.log(
"%cMusic Blocks",
"font-size: 24px; font-weight: bold; font-family: sans-serif; padding:20px 0 0 110px; background: url(" +
imgUrl +
") no-repeat;"
imgUrl +
") no-repeat;"
);
// eslint-disable-next-line no-console
console.log(
Expand Down Expand Up @@ -4868,10 +4879,10 @@ class Activity {
typeof flags !== "undefined"
? flags
: {
run: false,
show: false,
collapse: false
};
run: false,
show: false,
collapse: false
};
this.loading = true;
document.body.style.cursor = "wait";
this.doLoadAnimation();
Expand Down Expand Up @@ -5234,9 +5245,8 @@ class Activity {
[
"nameddo",
{
value: `V: ${parseInt(lineId) + 1} Line ${
staffBlocksMap[lineId]?.baseBlocks?.length + 1
}`
value: `V: ${parseInt(lineId) + 1} Line ${staffBlocksMap[lineId]?.baseBlocks?.length + 1
}`
}
],
0,
Expand All @@ -5245,12 +5255,12 @@ class Activity {
staffBlocksMap[lineId].baseBlocks.length === 0
? null
: staffBlocksMap[lineId].baseBlocks[
staffBlocksMap[lineId].baseBlocks.length - 1
][0][
staffBlocksMap[lineId].baseBlocks[
staffBlocksMap[lineId].baseBlocks.length - 1
][0].length - 4
][0],
staffBlocksMap[lineId].baseBlocks.length - 1
][0][
staffBlocksMap[lineId].baseBlocks[
staffBlocksMap[lineId].baseBlocks.length - 1
][0].length - 4
][0],
null
]
],
Expand All @@ -5266,9 +5276,8 @@ class Activity {
[
"text",
{
value: `V: ${parseInt(lineId) + 1} Line ${
staffBlocksMap[lineId]?.baseBlocks?.length + 1
}`
value: `V: ${parseInt(lineId) + 1} Line ${staffBlocksMap[lineId]?.baseBlocks?.length + 1
}`
}
],
0,
Expand Down Expand Up @@ -5303,14 +5312,14 @@ class Activity {
staffBlocksMap[staffIndex].startBlock.length - 3
][4][2] =
staffBlocksMap[staffIndex].baseBlocks[0][0][
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
][0];
// Update the first namedo block with settimbre
staffBlocksMap[staffIndex].baseBlocks[0][0][
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
][4][0] =
staffBlocksMap[staffIndex].startBlock[
staffBlocksMap[staffIndex].startBlock.length - 3
staffBlocksMap[staffIndex].startBlock.length - 3
][0];
const repeatblockids = staffBlocksMap[staffIndex].repeatArray;
for (const repeatId of repeatblockids) {
Expand All @@ -5322,7 +5331,7 @@ class Activity {
0,
[
staffBlocksMap[staffIndex].startBlock[
staffBlocksMap[staffIndex].startBlock.length - 3
staffBlocksMap[staffIndex].startBlock.length - 3
][0] /*setribmre*/,
blockId + 1,
staffBlocksMap[staffIndex].nameddoArray[staffIndex][0],
Expand All @@ -5331,8 +5340,8 @@ class Activity {
] === null
? null
: staffBlocksMap[staffIndex].nameddoArray[staffIndex][
repeatId.end + 1
]
repeatId.end + 1
]
]
]);
staffBlocksMap[staffIndex].repeatBlock.push([
Expand Down Expand Up @@ -5366,7 +5375,7 @@ class Activity {
const secondnammedo = _searchIndexForMusicBlock(
staffBlocksMap[staffIndex].baseBlocks[repeatId.end + 1][0],
staffBlocksMap[staffIndex].nameddoArray[staffIndex][
repeatId.end + 1
repeatId.end + 1
]
);

Expand All @@ -5389,31 +5398,31 @@ class Activity {
const prevnameddo = _searchIndexForMusicBlock(
staffBlocksMap[staffIndex].baseBlocks[repeatId.start - 1][0],
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
currentnammeddo
currentnammeddo
][4][0]
);
const afternamedo = _searchIndexForMusicBlock(
staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0],
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
currentnammeddo
currentnammeddo
][4][1]
);
let prevrepeatnameddo = -1;
if (prevnameddo === -1) {
prevrepeatnameddo = _searchIndexForMusicBlock(
staffBlocksMap[staffIndex].repeatBlock,
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
currentnammeddo
currentnammeddo
][4][0]
);
}
const prevBlockId =
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
currentnammeddo
currentnammeddo
][4][0];
const currentBlockId =
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
currentnammeddo
currentnammeddo
][0];

// Needs null checking optmizie
Expand All @@ -5427,7 +5436,7 @@ class Activity {
0,
[
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
currentnammeddo
currentnammeddo
][4][0],
blockId + 1,
currentBlockId,
Expand Down Expand Up @@ -6741,12 +6750,12 @@ class Activity {
return $j("<li></li>")
.append(
'<img src="' +
(item.artwork || "") +
'" height = "20px">' +
"<a>" +
" " +
item.label +
"</a>"
(item.artwork || "") +
'" height = "20px">' +
"<a>" +
" " +
item.label +
"</a>"
)
.appendTo(ul.css("z-index", 35000));
};
Expand Down Expand Up @@ -6870,10 +6879,10 @@ class Activity {
container.setAttribute(
"style",
"position: absolute; right:" +
(document.body.clientWidth - x) +
"px; top: " +
y +
"px;"
(document.body.clientWidth - x) +
"px; top: " +
y +
"px;"
);
document.getElementById("buttoncontainerBOTTOM").appendChild(container);
return container;
Expand Down Expand Up @@ -7322,6 +7331,7 @@ class Activity {

// Initialize Ticker with optimal framerate
createjs.Ticker.framerate = 60;
createjs.Ticker.timingMode = createjs.Ticker.RAF;

// ===== Idle Ticker Optimization =====
// Throttle rendering when user is inactive and no music is playing
Expand Down
Loading