Skip to content

Commit 6e99803

Browse files
stutijain2006stutijain2006
committed
Optimize create.js ticker with idle throttling and tab visibility handling
1 parent abca392 commit 6e99803

File tree

2 files changed

+57
-48
lines changed

2 files changed

+57
-48
lines changed

‎index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -568,7 +568,6 @@
568568
canvas = document.getElementById("canvas");
569569
stage = new createjs.Stage(canvas);
570570

571-
createjs.Ticker.framerate = 60;
572571
// createjs.Ticker.addEventListener("tick", stage); // Managed by Activity class
573572
}
574573
document.addEventListener("DOMContentLoaded", init);

‎js/activity.js‎

Lines changed: 57 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2247,7 +2247,7 @@ class Activity {
22472247
const changeText = () => {
22482248
const randomLoadMessage =
22492249
messages.load_messages[
2250-
Math.floor(Math.random() * messages.load_messages.length)
2250+
Math.floor(Math.random() * messages.load_messages.length)
22512251
];
22522252
document.getElementById("messageText").innerHTML = randomLoadMessage + "...";
22532253
counter++;
@@ -2931,6 +2931,15 @@ class Activity {
29312931
let lastActivity = Date.now();
29322932
let isIdle = false;
29332933

2934+
document.addEventListener("visibilitychange", () => {
2935+
if (document.hidden) {
2936+
createjs.Ticker.paused = true;
2937+
} else {
2938+
createjs.Ticker.paused = false;
2939+
resetIdleTimer();
2940+
}
2941+
});
2942+
29342943
// Wake up function - restores full framerate
29352944
const resetIdleTimer = () => {
29362945
lastActivity = Date.now();
@@ -2950,8 +2959,7 @@ class Activity {
29502959
window.addEventListener("wheel", resetIdleTimer);
29512960

29522961
// Periodic check for idle state
2953-
setInterval(() => {
2954-
// Check if music/code is playing
2962+
const idleCheck = () => {
29552963
const isMusicPlaying = this.logo?._alreadyRunning || false;
29562964

29572965
if (!isMusicPlaying && Date.now() - lastActivity > IDLE_THRESHOLD) {
@@ -2961,10 +2969,13 @@ class Activity {
29612969
console.log("⚡ Idle mode: Throttling to 1 FPS to save battery");
29622970
}
29632971
} else if (isIdle && isMusicPlaying) {
2964-
// Music started playing - wake up immediately
29652972
resetIdleTimer();
29662973
}
2967-
}, 1000);
2974+
2975+
setTimeout(idleCheck, 1000);
2976+
};
2977+
2978+
setTimeout(idleCheck, 1000);
29682979

29692980
// Expose activity instance for external checks
29702981
if (typeof window !== "undefined") {
@@ -3341,9 +3352,9 @@ class Activity {
33413352
that.blocks.moveBlock(
33423353
newBlock,
33433354
(x || that.blocksContainer.x + 100) -
3344-
that.blocksContainer.x,
3355+
that.blocksContainer.x,
33453356
(y || that.blocksContainer.y + 100) -
3346-
that.blocksContainer.y
3357+
that.blocksContainer.y
33473358
);
33483359
}
33493360
);
@@ -4795,8 +4806,8 @@ class Activity {
47954806
console.log(
47964807
"%cMusic Blocks",
47974808
"font-size: 24px; font-weight: bold; font-family: sans-serif; padding:20px 0 0 110px; background: url(" +
4798-
imgUrl +
4799-
") no-repeat;"
4809+
imgUrl +
4810+
") no-repeat;"
48004811
);
48014812
// eslint-disable-next-line no-console
48024813
console.log(
@@ -4868,10 +4879,10 @@ class Activity {
48684879
typeof flags !== "undefined"
48694880
? flags
48704881
: {
4871-
run: false,
4872-
show: false,
4873-
collapse: false
4874-
};
4882+
run: false,
4883+
show: false,
4884+
collapse: false
4885+
};
48754886
this.loading = true;
48764887
document.body.style.cursor = "wait";
48774888
this.doLoadAnimation();
@@ -5234,9 +5245,8 @@ class Activity {
52345245
[
52355246
"nameddo",
52365247
{
5237-
value: `V: ${parseInt(lineId) + 1} Line ${
5238-
staffBlocksMap[lineId]?.baseBlocks?.length + 1
5239-
}`
5248+
value: `V: ${parseInt(lineId) + 1} Line ${staffBlocksMap[lineId]?.baseBlocks?.length + 1
5249+
}`
52405250
}
52415251
],
52425252
0,
@@ -5245,12 +5255,12 @@ class Activity {
52455255
staffBlocksMap[lineId].baseBlocks.length === 0
52465256
? null
52475257
: staffBlocksMap[lineId].baseBlocks[
5248-
staffBlocksMap[lineId].baseBlocks.length - 1
5249-
][0][
5250-
staffBlocksMap[lineId].baseBlocks[
5251-
staffBlocksMap[lineId].baseBlocks.length - 1
5252-
][0].length - 4
5253-
][0],
5258+
staffBlocksMap[lineId].baseBlocks.length - 1
5259+
][0][
5260+
staffBlocksMap[lineId].baseBlocks[
5261+
staffBlocksMap[lineId].baseBlocks.length - 1
5262+
][0].length - 4
5263+
][0],
52545264
null
52555265
]
52565266
],
@@ -5266,9 +5276,8 @@ class Activity {
52665276
[
52675277
"text",
52685278
{
5269-
value: `V: ${parseInt(lineId) + 1} Line ${
5270-
staffBlocksMap[lineId]?.baseBlocks?.length + 1
5271-
}`
5279+
value: `V: ${parseInt(lineId) + 1} Line ${staffBlocksMap[lineId]?.baseBlocks?.length + 1
5280+
}`
52725281
}
52735282
],
52745283
0,
@@ -5303,14 +5312,14 @@ class Activity {
53035312
staffBlocksMap[staffIndex].startBlock.length - 3
53045313
][4][2] =
53055314
staffBlocksMap[staffIndex].baseBlocks[0][0][
5306-
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
5315+
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
53075316
][0];
53085317
// Update the first namedo block with settimbre
53095318
staffBlocksMap[staffIndex].baseBlocks[0][0][
53105319
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
53115320
][4][0] =
53125321
staffBlocksMap[staffIndex].startBlock[
5313-
staffBlocksMap[staffIndex].startBlock.length - 3
5322+
staffBlocksMap[staffIndex].startBlock.length - 3
53145323
][0];
53155324
const repeatblockids = staffBlocksMap[staffIndex].repeatArray;
53165325
for (const repeatId of repeatblockids) {
@@ -5322,7 +5331,7 @@ class Activity {
53225331
0,
53235332
[
53245333
staffBlocksMap[staffIndex].startBlock[
5325-
staffBlocksMap[staffIndex].startBlock.length - 3
5334+
staffBlocksMap[staffIndex].startBlock.length - 3
53265335
][0] /*setribmre*/,
53275336
blockId + 1,
53285337
staffBlocksMap[staffIndex].nameddoArray[staffIndex][0],
@@ -5331,8 +5340,8 @@ class Activity {
53315340
] === null
53325341
? null
53335342
: staffBlocksMap[staffIndex].nameddoArray[staffIndex][
5334-
repeatId.end + 1
5335-
]
5343+
repeatId.end + 1
5344+
]
53365345
]
53375346
]);
53385347
staffBlocksMap[staffIndex].repeatBlock.push([
@@ -5366,7 +5375,7 @@ class Activity {
53665375
const secondnammedo = _searchIndexForMusicBlock(
53675376
staffBlocksMap[staffIndex].baseBlocks[repeatId.end + 1][0],
53685377
staffBlocksMap[staffIndex].nameddoArray[staffIndex][
5369-
repeatId.end + 1
5378+
repeatId.end + 1
53705379
]
53715380
);
53725381

@@ -5389,31 +5398,31 @@ class Activity {
53895398
const prevnameddo = _searchIndexForMusicBlock(
53905399
staffBlocksMap[staffIndex].baseBlocks[repeatId.start - 1][0],
53915400
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5392-
currentnammeddo
5401+
currentnammeddo
53935402
][4][0]
53945403
);
53955404
const afternamedo = _searchIndexForMusicBlock(
53965405
staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0],
53975406
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5398-
currentnammeddo
5407+
currentnammeddo
53995408
][4][1]
54005409
);
54015410
let prevrepeatnameddo = -1;
54025411
if (prevnameddo === -1) {
54035412
prevrepeatnameddo = _searchIndexForMusicBlock(
54045413
staffBlocksMap[staffIndex].repeatBlock,
54055414
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5406-
currentnammeddo
5415+
currentnammeddo
54075416
][4][0]
54085417
);
54095418
}
54105419
const prevBlockId =
54115420
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5412-
currentnammeddo
5421+
currentnammeddo
54135422
][4][0];
54145423
const currentBlockId =
54155424
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5416-
currentnammeddo
5425+
currentnammeddo
54175426
][0];
54185427

54195428
// Needs null checking optmizie
@@ -5427,7 +5436,7 @@ class Activity {
54275436
0,
54285437
[
54295438
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5430-
currentnammeddo
5439+
currentnammeddo
54315440
][4][0],
54325441
blockId + 1,
54335442
currentBlockId,
@@ -6741,12 +6750,12 @@ class Activity {
67416750
return $j("<li></li>")
67426751
.append(
67436752
'<img src="' +
6744-
(item.artwork || "") +
6745-
'" height = "20px">' +
6746-
"<a>" +
6747-
" " +
6748-
item.label +
6749-
"</a>"
6753+
(item.artwork || "") +
6754+
'" height = "20px">' +
6755+
"<a>" +
6756+
" " +
6757+
item.label +
6758+
"</a>"
67506759
)
67516760
.appendTo(ul.css("z-index", 35000));
67526761
};
@@ -6870,10 +6879,10 @@ class Activity {
68706879
container.setAttribute(
68716880
"style",
68726881
"position: absolute; right:" +
6873-
(document.body.clientWidth - x) +
6874-
"px; top: " +
6875-
y +
6876-
"px;"
6882+
(document.body.clientWidth - x) +
6883+
"px; top: " +
6884+
y +
6885+
"px;"
68776886
);
68786887
document.getElementById("buttoncontainerBOTTOM").appendChild(container);
68796888
return container;
@@ -7322,6 +7331,7 @@ class Activity {
73227331

73237332
// Initialize Ticker with optimal framerate
73247333
createjs.Ticker.framerate = 60;
7334+
createjs.Ticker.timingMode = createjs.Ticker.RAF;
73257335

73267336
// ===== Idle Ticker Optimization =====
73277337
// Throttle rendering when user is inactive and no music is playing

0 commit comments

Comments
 (0)