Category: javascript

Category Added in a WPeMatico Campaign

Javascript cookies not working on anything

I’ve been trying to get cookies to work using Javascript, but I have got nothing so far.

I’ve tried different browsers (Microsoft Edge, Internet Explorer, and Opera so far), CodePen.io, and a VSCode live server add-on (by Ritwick Dey). The live server add-on shows the cookie for some reason though.

The Javascript:

document.cookie = "name=value";
alert(document.cookie);

And the html (if you need it):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>

    <script>
      document.cookie = "name=value";
      alert(document.cookie);
    </script>

  </body>
</html>

Really simple, but for some reason on every browser I’ve tried it shows nothing!
Reference Photo:
Cookie

Also I’m really new to javascript so it’s probably a very simple fix that I just can’t see.
And my first time using Stack overflow.

Redirect to App Store or Google Play based on device

We put together an app that needs to provide links to 3rd party apps for people to download. We are trying to link to a place to download the app. We want to make it so that when someone clicks the link they are forwarded either to the play store or the app store depending on what device they have. The problem is, the cross platform software used to make the app only allows us to put in a link with https. To compensate, created Html pages that redirect users to a place to download the the 3rd party app. The problem is that with an iPad, the Safari browser is detected and treated as if a PC instead of a tablet. We want to redirect people with iphones, ipads, or other mobile apple devices to the app store while users with android devices are sent to the play store. We are trying to avoid using any 3rd party dynamic link software and do this purely with code.

Here’s what we tried so far. We set up an external html document and deep linked to this document from the app. Once the user gets to this redirecting document, its supposed to a) detect their device b) based on that device, redirect them to either the app store or the play store. However, with ipads it seems to be treated like a PC instead of a mobile device and does not redirect to the app store.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
<script>
function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}</script>

<script>
function DetectAndServe(){
    let os = getMobileOperatingSystem();
    if (os == "Android") {
        window.location.href = "https://play.google.com/store/apps/details?id=com.google.android.apps.docs.editors.docs"; 
    } else if (os == "iOS") {
        window.location.href = "https://apps.apple.com/us/app/google-docs-sync-edit-share/id842842640";
    } else if (os == "Windows Phone") {
        window.location.href = "https://docs.google.com/";
    } else {
        window.location.href = "https://docs.google.com/";
    }
}
</script>
</head>
<body onload="DetectAndServe()">
</body>
</html>

I suggested simply deleting the option for PC forcing the user to be redirected either to the app store or play store with no other options. My partner however said that in the future, with other projects, we may want to redirect users to an option for PC users and if this option were removed now, we may have to create additional files rather than the simplicity of one file per app to be redirected to. So we need another option to force ipads to be recognized as mobile devices. We also need for users to be directed to a link that would open the app store / play store to download the 3rd party app, if they don’t have it, or open the app if they do have it. It’s most important however, to redirect users to the play store / app store. Does someone know a way to do this?

how to create download button

My download button isnt working, I hover over it and it will show the download link bottom left of the screen but I click it and the animation plays but it doesnt start the download.

Heres the html:

<a href="https://www.icey.pink/downloads/oaq74s/icey.pink.zip" class="button dark"style="font-size: 25px;margin-left: 310px;margin-bottom: 20px;font-family: 'Century Gothic Paneuropean';" download>
                    
                                        <ul>
                                            <li style="color: #ff00b7;">&#68;ownload</li>
                                            <li style="color: #ff00b7;">&#68;ownloading</li>
                                            <li style="color: #ff00b7;">Done!</li>
                                        </ul>
                                        <div>
                                            <svg viewBox="0 0 24 24"></svg>
                                        </div>
                                    </a>

Here is CSS

.button {
    &.dark-single {
        --background: none;
        --rectangle: #242836;
        --success: #4BC793;
    }
    &.white-single {
        --background: none;
        --rectangle: #F5F9FF;
        --arrow: #275efe;
        --success: #275efe;
        --shadow: rgba(10, 22, 50, .1);
    }
    &.dark {
        --background: #242836;
        --rectangle: #1C212E;
        --arrow: #F5F9FF;
        --text: #F5F9FF;
        --success: #2F3545;
    }
}

.button {
    --background: #275efe;
    --rectangle: #184fee;
    --success: #{mix(white, #184fee, 20%)};
    --text: #fff;
    --arrow: #fff;
    --checkmark: #fff;
    --shadow: rgba(10, 22, 50, .24);
    display: flex;
    overflow: hidden;
    text-decoration: none;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    background: var(--background);
    border-radius: 8px;
    box-shadow: 0 2px 8px -1px var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    &:active {
        transform: scale(.95);
        box-shadow: 0 1px 4px -1px var(--shadow);
    }
    ul {
        margin: 0;
        padding: 16px 40px;
        list-style: none;
        text-align: center;
        position: relative;
        backface-visibility: hidden;
        font-size: 16px;
        font-weight: 500;
        line-height: 28px;
        color: var(--text);
        li {
            &:not(:first-child) {
                top: 16px;
                left: 0;
                right: 0;
                position: absolute;
            }
            &:nth-child(2) {
                top: 76px;
            }
            &:nth-child(3) {
                top: 136px;
            }
        }
    }
    & > div {
        position: relative;
        width: 60px;
        height: 60px;
        background: var(--rectangle);
        &:before,
        &:after {
            content: '';
            display: block;
            position: absolute;
        }
        &:before {
            border-radius: 1px;
            width: 2px;
            top: 50%;
            left: 50%;
            height: 17px;
            margin: -9px 0 0 -1px;
            background: var(--arrow);
        }
        &:after {
            width: 60px;
            height: 60px;
            transform-origin: 50% 0;
            border-radius: 0 0 80% 80%;
            background: var(--success);
            top: 0;
            left: 0;
            transform: scaleY(0);
        }
        svg {
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            left: 50%;
            top: 50%;
            margin: -9px 0 0 -10px;
            fill: none;
            z-index: 1;
            stroke-width: 2px;
            stroke: var(--arrow);
            stroke-linecap: round;
            stroke-linejoin: round;
        }
    }
    &.loading {
        ul {
            animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
        }
        & > div {
            &:before {
                animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
            }
            &:after {
                animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
            }
            svg {
                animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
            }
        }
    }
}

@keyframes text {
    10%,
    85% {
        transform: translateY(-100%);
    }
    95%,
    100% {
        transform: translateY(-200%);
    }
}

@keyframes line {
    5%,
    10% {
        transform: translateY(-30px);
    }
    40% {
        transform: translateY(-20px);
    }
    65% {
        transform: translateY(0);
    }
    75%,
    100% {
        transform: translateY(30px);
    }
}

@keyframes svg {
    0%,
    20% {
        stroke-dasharray: 0;
        stroke-dashoffset: 0;
    }
    21%,
    89% {
        stroke-dasharray: 26px;
        stroke-dashoffset: 26px;
        stroke-width: 3px;
        margin: -10px 0 0 -10px;
        stroke: var(--checkmark);
    }
    100% {
        stroke-dasharray: 26px;
        stroke-dashoffset: 0;
        margin: -10px 0 0 -10px;
        stroke: var(--checkmark);
    }
    12% {
        opacity: 1;
    }
    20%,
    89% {
        opacity: 0;
    }
    90%,
    100% {
        opacity: 1;
    }
}

@keyframes background {
    10% {
        transform: scaleY(0);
    }
    40% {
        transform: scaleY(.15);
    }
    65% {
        transform: scaleY(.5);
        border-radius: 0 0 50% 50%;
    }
    75% {
        border-radius: 0 0 50% 50%;
    }
    90%,
    100% {
        border-radius: 0;
    }
    75%,
    100% {
        transform: scaleY(1);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    font-family: 'Roboto', Arial;
    justify-content: center;
    align-items: center;
    background: #E4ECFA;
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        & > div {
            flex-basis: 100%;
            width: 0;
        }
        .button {
            margin: 16px;
            @media(max-width: 400px) {
                margin: 12px;
            }
        }
    }
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}

Here is Javascript:

document.querySelectorAll('.button').forEach(button => {

    let duration = 3000,
        svg = button.querySelector('svg'),
        svgPath = new Proxy({
            y: null,
            smoothing: null
        }, {
            set(target, key, value) {
                target[key] = value;
                if(target.y !== null && target.smoothing !== null) {
                    svg.innerHTML = getPath(target.y, target.smoothing, null);
                }
                return true;
            },
            get(target, key) {
                return target[key];
            }
        });

    button.style.setProperty('--duration', duration);

    svgPath.y = 20;
    svgPath.smoothing = 0;

    button.addEventListener('click', e => {
        
        e.preventDefault();

        if(!button.classList.contains('loading')) {

            button.classList.add('loading');

            gsap.to(svgPath, {
                smoothing: .3,
                duration: duration * .065 / 1000
            });

            gsap.to(svgPath, {
                y: 12,
                duration: duration * .265 / 1000,
                delay: duration * .065 / 1000,
                ease: Elastic.easeOut.config(1.12, .4)
            });

            setTimeout(() => {
                svg.innerHTML = getPath(0, 0, [
                    [3, 14],
                    [8, 19],
                    [21, 6]
                ]);
            }, duration / 2);

        }

    });

});

function getPoint(point, i, a, smoothing) {
    let cp = (current, previous, next, reverse) => {
            let p = previous || current,
                n = next || current,
                o = {
                    length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
                    angle: Math.atan2(n[1] - p[1], n[0] - p[0])
                },
                angle = o.angle + (reverse ? Math.PI : 0),
                length = o.length * smoothing;
            return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
        },
        cps = cp(a[i - 1], a[i - 2], point, false),
        cpe = cp(point, a[i - 1], a[i + 1], true);
    return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}

function getPath(update, smoothing, pointsNew) {
    let points = pointsNew ? pointsNew : [
            [4, 12],
            [12, update],
            [20, 12]
        ],
        d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '');
    return `<path d="${d}" />`;
}

I have tried looking at the code over and over again and I added the link inside of the href=”” but that didnt work either. I got the button source from codepen, here is the link: https://codepen.io/aaroniker/pen/MWgNKGr

How to get Live URL from vimeo api

I have seen lot of solutions for my question but none seems working. For instance, from this link https://developer.vimeo.com/api/live/playback I tried getting the live url but its showing some permission error.

here is the curl command to test it.

curl -X GET 
  -H "Authorization: Basic MGYzOWQwN2Q1OWUyNGRiNzJjNWY3ZTE2MTUxMTQyYjZhMjZmN2VmNTptZmNjdnZnWHA5SnNqQjhTQTE0dkxPTTFzQjFoc2E1Y0hOU3dEdjRNMWNmTnVsWUp5cjdjZ1haL1lRK0ZRNWNsVERaa0R3bCtRb2JzNXpjZzZWVVhmL0dPK0oweE5sTW9CdWh2WG1hVnFReGhWK0hSZlFZZG5hbWxaOEtZLytjKw==" 
-H "Accept: application/vnd.vimeo.*+json;version=3.4" 
"https://api.vimeo.com/me/live_events/907930022/m3u8_playback"

here is my nodeJs code.

       import { Vimeo } from "vimeo";

       const client = new Vimeo(CLIENT_ID, CLIENT_SECRET, ACCESS_TOKEN);
       
       const headers = {
        'Accept': 'application/vnd.vimeo.*+json;version=3.4',
       };

      const liveEventParams = {
    type: 'live',
    name: 'Scheduled Live Event',
    start_time: scheduleTime, 
    description: 'Live event test',
    privacy: {
      view: 'anybody', 
    },
  };

      const clientData = ()=>{
          return new Promise((resolve, reject) =>{
          client.request({
            method: 'post',
            path: '/me/videos',
            headers:headers,
            query: liveEventParams,
          },(error, body, status_code, headers) => {
            if (error) {
              console.log('Error scheduling live event:', error);
              reject(new GraphQLError(error, {
                  extensions: { code: 'UNAUTHENTICATED' },
                  path: 'createMedia',
              }));

            } else {
              const liveEventId = body.uri.split('/').pop();
              resolve({ liveEventId, body, status_code });
            }
          })})}

        const { liveEventId,body,status_code } = await clientData();
        console.log("----body",body)

and this works fine, im getting the url of videos/eventid but Im not getting the live url.
How to get the live url when scheduled and created ? Im only getting the videos category which is not live.

How to get data from a Fetch, put in a variable and display the variable on the page [duplicate]

I am ultimately trying to get data from and endpoint using the fetch API and put it into a variable so I can access bits of the data to assign them to something (i.e. another variable, form input default etc.).
I’m going step by step through the process. I got as far as verification by attempting to write the variable to the document and that’s where it goes awry, (I think).
Am I doing it right and expecting the wrong result? Am I doing it wrong and expecting the right result? I suppose I could be doing it wrong AND expecting the wrong result.
Whatever I’m doing, I know that it isn’t working.
I am new to Javascript, so I would be grateful for any advise.

Here is my code…

function userList() {
    fetch(`https://jsonplaceholder.typicode.com/users`)
    .then(response => response.json()) 
    .then(output => {
        const aaa = output;
        console.log(aaa);
        document.getElementById("displayText1").innerHTML=(aaa);
    });
}

I successfully get data using the fetch API. Then I get the JSON data. After that, I successfully put it in a variable (aaa). I can see it when I log the variable to the console. I then attempt to display it (aaa) on the document. I get this…

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

I was expecting something that looked like what I see in the console. Since I don’t, I don’t believe I have a variable I can use.

Please advise,
Thank you.

Getting into Javascript- confusion

I started learning Javascript few months ago, I learned the basics till I reached the function topic,

I got confused in arrow function/ promises(async-await and .then)
and also what is the purpose of assigning a variable to a function
as well as callback function?

As of now my way of learning is watching a tutorial and practice the same, but what I found the teaching order of those topic is different from channel to channel.

Therefore, may I know what to learn first out of those?
if you can order topics, this will be very helpful
As it is confusing to know and also how those can be helpful and applicable in building applications.

Thanks in advance

clear guidance what to focus on first and pay attention to from experienced developers

Is there away I can make this SQL statement to sort the month using year?

I’m trying to get the total of users per department, per year and per month,

This is statement, it is working properly, I get the data I want but it’s unorganized, is there anyway I can make it more organized?

SELECT
        u.department,
        YEAR(STR_TO_DATE(SUBSTRING_INDEX(tlc.time, ',', 1), '%d/%m/%y')) AS year,
        DATE_FORMAT(STR_TO_DATE(SUBSTRING_INDEX(tlc.time, ',', 1), '%d/%m/%y'), '%b') AS month,
        COUNT(*) AS event_count
    FROM
        userlibrary tlc
    LEFT JOIN
        users u ON tlc.userfullname = u.fullname
    WHERE
        u.type = ?
        AND YEAR(STR_TO_DATE(SUBSTRING_INDEX(tlc.time, ',', 1), '%d/%m/%y')) BETWEEN ? AND ?
    GROUP BY
        u.department,
        year,
        month
    ORDER BY
        u.department,
        year,
        month;
  `;

This is the result data I get, it’s fine but seems more unstructured

[
    {
        "department": null,
        "year": 2022,
        "month": "Aug",
        "event_count": 27
    },
    {
        "department": null,
        "year": 2022,
        "month": "Dec",
        "event_count": 4
    },
    {
        "department": null,
        "year": 2022,
        "month": "Nov",
        "event_count": 29
    },
    {
        "department": null,
        "year": 2022,
        "month": "Oct",
        "event_count": 49
    },
]

I get the data I want, but is it possible to

"null": {
        "2022": {
            "Aug": 27,
            "Dec": 4,
             etc...
        },
        "2023": {
            "Apr": 25,
            "Aug": 7,
            "Feb": 3,
             etc...


        }
    },

Cannot find module ./mongodb

const dbConnect = require('./mongodb');
const insert = () => {
  console.log("insert function");
}

insert();

insert function
node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:UsersSuperDesktopnode.tutmongodb' imported from C:UsersSuperDesktopnode.tutinsert.js
Did you mean to import ../mongodb.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:946:10)
    at defaultResolve (node:internal/modules/esm/resolve:1132:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ESMLoader.import (node:internal/modules/esm/loader:524:22)
    at importModuleDynamically (node:internal/modules/cjs/loader:1188:29)
    at importModuleDynamicallyWrapper (node:internal/vm/module:429:21) {
  code: 'ERR_MODULE_NOT_FOUND'
}

i am trying to insert data from my mongo db file but it showing error

Write data to a CSV file with JavaScript

very new to the JavaScript world. I am trying to modify this js file to write data a CSV file. This code is available as a Package on GitHub, but I want to take it a step further by collected the data.

How do get this code to write the data, it creates the data, but I not sure how to get it constantly write the data received.

Here is the Code – you can see my attempt to write the data at the end of the code. Any help would be very much appreciated, have done a lot of research, but just can get this to come together.

I tried about everything I can find on the web on how to write data, all the examples I see are showing hard data to be written to the csv file, I want to capture the data from all the variables in the code and write all the lines of data to the csv file.

Thank you

var PORT = 20127;
var HOST = '192.168.xx.xx';

const express = require('express');
const app = express();

//used to write to the csv file
const fs = require('fs');

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

var dgram = require('dgram');
var server = dgram.createSocket('udp4');

let obj = {};

server.on('listening', function () {
var address = server.address();
console.log('UDP Server listening on ' + address.address + ":" + address.port);
});

server.on('message', function (message, remote) {
let jump = 0;

    obj.isRaceOn = message.readInt32LE(jump);
    jump += 4;
    obj.timestampMS = message.readUInt32LE(jump); //Getting wrong data
    jump += 4;
    obj.engineMaxRpm = message.readFloatLE(jump);
    jump += 4;
    obj.engineIdleRpm = message.readFloatLE(jump);
    jump += 4;
    obj.currentEngineRpm = message.readFloatLE(jump);
    jump += 4;
    
    obj.accelerationX = message.readFloatLE(jump); //In the car's local space; X = right, Y = up, Z = forward
    jump += 4;
    obj.accelerationY = message.readFloatLE(jump);
    jump += 4;
    obj.accelerationZ = message.readFloatLE(jump);
    jump += 4;
    
    obj.velocityX = message.readFloatLE(jump); //In the car's local space; X = right, Y = up, Z = forward
    jump += 4;
    obj.velocityY = message.readFloatLE(jump);
    jump += 4;
    obj.velocityZ = message.readFloatLE(jump);
    jump += 4;
    
    obj.angularVelocityX = message.readFloatLE(jump); //In the car's local space; X = pitch, Y = yaw, Z = roll
    jump += 4;
    obj.angularVelocityY = message.readFloatLE(jump);
    jump += 4;
    obj.angularVelocityZ = message.readFloatLE(jump);
    jump += 4;
    
    obj.yaw = message.readFloatLE(jump);
    jump += 4;
    obj.pitch = message.readFloatLE(jump);
    jump += 4;
    obj.roll = message.readFloatLE(jump);
    jump += 4;
    
    obj.normalizedSuspensionTravelFrontLeft = message.readFloatLE(jump); // Suspension travel normalized: 0.0f = max stretch; 1.0 = max compression
    jump += 4;
    obj.normalizedSuspensionTravelFrontRight = message.readFloatLE(jump);
    jump += 4;
    obj.normalizedSuspensionTravelRearLeft = message.readFloatLE(jump);
    jump += 4;
    obj.normalizedSuspensionTravelRearRight = message.readFloatLE(jump);
    jump += 4;
    
    obj.tireSlipRatioFrontLeft = message.readFloatLE(jump); // Tire normalized slip ratio, = 0 means 100% grip and |ratio| > 1.0 means loss of grip.
    jump += 4;
    obj.tireSlipRatioFrontRight = message.readFloatLE(jump);
    jump += 4;
    obj.tireSlipRatioRearLeft = message.readFloatLE(jump);
    jump += 4;
    obj.tireSlipRatioRearRight = message.readFloatLE(jump);
    jump += 4;
    
    obj.wheelRotationSpeedFrontLeft = message.readFloatLE(jump); // Wheel rotation speed radians/sec.
    jump += 4; 
    obj.wheelRotationSpeedFrontRight = message.readFloatLE(jump);
    jump += 4;
    obj.wheelRotationSpeedRearLeft = message.readFloatLE(jump);
    jump += 4;
    obj.wheelRotationSpeedRearRight = message.readFloatLE(jump);
    jump += 4;
    
    obj.wheelOnRumbleStripFrontLeft = message.readFloatLE(jump); // = 1 when wheel is on rumble strip, = 0 when off.
    jump += 4;
    obj.wheelOnRumbleStripFrontRight = message.readFloatLE(jump);
    jump += 4;
    obj.wheelOnRumbleStripRearLeft = message.readFloatLE(jump);
    jump += 4;
    obj.wheelOnRumbleStripRearRight = message.readFloatLE(jump);
    jump += 4;
    
    obj.wheelInPuddleDepthFrontLeft = message.readFloatLE(jump); // = from 0 to 1, where 1 is the deepest puddle
    jump += 4;
    obj.wheelInPuddleDepthFrontRight = message.readFloatLE(jump);
    jump += 4;
    obj.wheelInPuddleDepthRearLeft = message.readFloatLE(jump);
    jump += 4;
    obj.wheelInPuddleDepthRearRight = message.readFloatLE(jump);
    jump += 4;
    
    obj.surfaceRumbleFrontLeft = message.readFloatLE(jump); // Non-dimensional surface rumble values passed to controller force feedback
    jump += 4;
    obj.surfaceRumbleFrontRight = message.readFloatLE(jump);
    jump += 4;
    obj.surfaceRumbleRearLeft = message.readFloatLE(jump);
    jump += 4;
    obj.surfaceRumbleRearRight = message.readFloatLE(jump);
    jump += 4;
    
    obj.tireSlipAngleFrontLeft = message.readFloatLE(jump); // Tire normalized slip angle, = 0 means 100% grip and |angle| > 1.0 means loss of grip.
    jump += 4;
    obj.tireSlipAngleFrontRight = message.readFloatLE(jump);
    jump += 4;
    obj.tireSlipAngleRearLeft = message.readFloatLE(jump);
    jump += 4;
    obj.tireSlipAngleRearRight = message.readFloatLE(jump);
    jump += 4;
    
    obj.tireCombinedSlipFrontLeft = message.readFloatLE(jump); // Tire normalized combined slip, = 0 means 100% grip and |slip| > 1.0 means loss of grip.
    jump += 4;
    obj.tireCombinedSlipFrontRight = message.readFloatLE(jump);
    jump += 4;
    obj.tireCombinedSlipRearLeft = message.readFloatLE(jump);
    jump += 4;
    obj.tireCombinedSlipRearRight = message.readFloatLE(jump);
    jump += 4;
    
    obj.suspensionTravelMetersFrontLeft = message.readFloatLE(jump); // Actual suspension travel in meters
    jump += 4;
    obj.suspensionTravelMetersFrontRight = message.readFloatLE(jump);
    jump += 4;
    obj.suspensionTravelMetersRearLeft = message.readFloatLE(jump);
    jump += 4;
    obj.suspensionTravelMetersRearRight = message.readFloatLE(jump);
    jump += 4;
    
    obj.carOrdinal = message.readInt32LE(jump); //Unique ID of the car make/model
    jump += 4;
    obj.carClass = message.readInt32LE(jump); //Between 0 (D -- worst cars) and 7 (X class -- best cars) inclusive 
    jump += 4;
    obj.carPerformanceIndex = message.readInt32LE(jump); //Between 100 (slowest car) and 999 (fastest car) inclusive
    jump += 4;
    obj.drivetrainType = message.readInt32LE(jump); //Corresponds to EDrivetrainType; 0 = FWD, 1 = RWD, 2 = AWD
    jump += 4;
    obj.numCylinders = message.readInt32LE(jump); //Number of cylinders in the engine
    jump += 4;
    
    //Position (meters)
    obj.positionX = message.readFloatLE(jump);
    jump += 4;
    obj.positionY = message.readFloatLE(jump);
    jump += 4;
    obj.positionZ = message.readFloatLE(jump);
    jump += 4;
    
    obj.speed = message.readFloatLE(jump); // meters per second
    jump += 4;
    obj.power = message.readFloatLE(jump); // watts
    jump += 4;
    obj.torque = message.readFloatLE(jump); // newton meter
    jump += 4;
    
    obj.tireTempFrontLeft = message.readFloatLE(jump);
    jump += 4;
    obj.tireTempFrontRight = message.readFloatLE(jump);
    jump += 4;
    obj.tireTempRearLeft = message.readFloatLE(jump);
    jump += 4;
    obj.tireTempRearRight = message.readFloatLE(jump);
    jump += 4;
    
    obj.boost = message.readFloatLE(jump);
    jump += 4;
    obj.fuel = message.readFloatLE(jump);
    jump += 4;
    obj.distanceTraveled = message.readFloatLE(jump);
    jump += 4;
    obj.bestLap = message.readFloatLE(jump); // seconds
    jump += 4;
    obj.lastLap = message.readFloatLE(jump); // seconds
    jump += 4;
    obj.currentLap = message.readFloatLE(jump); // seconds
    jump += 4;
    obj.currentRaceTime = message.readFloatLE(jump); // seconds
    jump += 4;
    
    obj.lapNumber = message.readUInt16LE(jump);
    jump += 2;
    obj.racePosition = message.readUInt8(jump);
    jump += 1;
    
    obj.accel = message.readUInt8(jump); // 0 - 255
    jump += 1;
    obj.brake = message.readUInt8(jump); // 0 - 255
    jump += 1;
    obj.clutch = message.readUInt8(jump);
    jump += 1;
    obj.handBrake = message.readUInt8(jump);
    jump += 1;
    obj.gear = message.readUInt8(jump);
    jump += 1;
    obj.steer = message.readUInt8(jump);
    jump += 1;
    
    obj.normalizedDrivingLine = message.readUInt8(jump);
    jump += 1;
    obj.normalizedAIBrakeDifference = message.readUInt8(jump);
    jump += 1;
    
    
    
    
    
    console.log(remote.address + ':' + remote.port + ' - (' + obj.isRaceOn + '), Gear:' + obj.gear + " - Tire:" + obj.tireSlipRatioFrontLeft);

//const fs = require('fs');
const writeTofile = ()=>{

let header = "handbrake ,gear, steer, lapnumber";

let data = 'obj.gear, tire, steer, lapnumber \n';

let csv_data = header + data

console.log(csv_data)
fs.writeFileSync("user.csv" , csv_data , "utf-8")
}

writeTofile()

});

server.bind(PORT, HOST);

app.get('/',(req,res)=>{
return res.send();
})

app.get('/data', function (req, res) {
return res.send(obj);
});

app.listen(8080,()=>{
console.log("Servidor ON");
});

Remix: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

I have a simple component that imports react-contenteditable and uses it like below.

import ContentEditable from "react-contenteditable";

  function Text({
 ... props here
  }) {
 ...other code

    return (
      <>
      <ContentEditable
          tabIndex="-1"
          onClick={onClick}
          className={className}
          innerRef={textRef}
          id={id}
          html={html ? html : ""}
          tagName={tag}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={onKeyDown}
          onSelect={handleSelect}
          placeholder={placeholder}
        /> 
       ...other code here
       
  }

But I keep getting below error. I use the same package in the exact same way in a different package and it works fine.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `Text`.
    at createFiberFromTypeAndProps (http://localhost:3000/build/_shared/chunk-WEAPBHQG.js:20439:25)
    at createFiberFromElement (http://localhost:3000/build/_shared/chunk-WEAPBHQG.js:20460:23)
    at reconcileSingleElement (http://localhost:3000/build/_shared/chunk-WEAPBHQG.js:11801:31)
    at reconcileChildFibers2 (http://localhost:3000/build/_shared/chunk-WEAPBHQG.js:11838:43)
    at reconcileChildren (http://localhost:3000/build/_shared/chunk-WEAPBHQG.js:14292:37)
    at updateHostComponent (http://localhost:3000/build/_shared/chunk-WEAPBHQG.js:14802:11)
    at beginWork (http://localhost:3000/build/_shared/chunk-WEAPBHQG.js:15923:22)
    at beginWork$1 (http://localhost:3000/build/_shared/chunk-WEAPBHQG.js:19749:22)
    at performUnitOfWork (http://localhost:3000/build/_shared/chunk-WEAPBHQG.js:19194:20)
    at workLoopSync (http://localhost:3000/build/_shared/chunk-WEAPBHQG.js:19133:13)

If I remove ContentEditable, everything works fine.

Any idea how to fix this?

Possible to prevent a function from running when it’s initiated by a button click?

I have a Chrome extension that I made that runs on an internal site that is very similar to Zillow, so I will use that as an example. If you go to a Zillow property and “connect” it to the extension via an injected button, basically saying you want to add it to your list of tracked properties, the intended behavior is that the next time you load up the property, one of the existing buttons is modified via innerText. Right now, when you connect the property by clicking the button to do so, immediately the existing button’s text is changed on the screen, even though there are a lot of other functions that are not possible to perform until at least 1 page reload.

What I am trying to do is allow the user to connect the property, and the text of the existing button does not do anything at this time, but only after the page is reloaded, then it will change as it should.

`   var propertyInject = async function () { 
propertyDetail = await g_group.get(propertyId);

if(groupDetail) {

document.arrive('[aria-label="Tax data"] { existing: true, fireOnAttributesModification: true,    onceOnly: false },
    async function (ele) {
        if(ele.querySelector('span :last-child').innerText != "Analyze taxes")
        ele.querySelector('span :last-child').innerText = "Analyze taxes";

})
}
}`

The existing code works great when the page is loaded up (the button text changes as normal) but when you connect the property, it immediately sees that the button meets the requirement to update the text, and it does so immediately. I am trying for it to not change this when the property is added, but only after the page is loaded every time after that.

Any suggestions?

P.S. If you see any syntax errors in the above code, I quickly cobbled that together in notepad because there is a lot of other unnecessary/unrelated stuff that would make make it way more annoying to see what’s going on, so I quickly removed all that. Apologies in advance.

Sinon callCount shows different results when spied function uses setTimeout with a wrapped function vs unwrapped

This is the test:

describe('blinkyDancer', function() {
  const { expect } = chai;
  let blinkyDancer;
  let clock;
  let timeBetweenSteps = 100;

  beforeEach(function() {
    clock = sinon.useFakeTimers();
    blinkyDancer = makeBlinkyDancer(10, 20, timeBetweenSteps);
  });

  describe('dance', function() {
    it('should call step at least once per second', function() {
      sinon.spy(blinkyDancer, 'step');
      expect(blinkyDancer.step.callCount).to.be.equal(0);
      // Depending on your solution, you may need an extra tick
      // If it does, try and refactor your solution to not
      // clock.tick(timeBetweenSteps);
      clock.tick(timeBetweenSteps);

      expect(blinkyDancer.step.callCount).to.be.equal(1);

      clock.tick(timeBetweenSteps);
      expect(blinkyDancer.step.callCount).to.be.equal(2);
    });
  });
});

This is the code being tested:

const makeDancer = function(top, left, timeBetweenSteps) {
  const dancer = {};

  dancer.$node = $('<span class="dancer"></span>');
 
  dancer.step = function() {
    // This version passes with only one initial tick in 
    // the code which is the expected outcome
    setTimeout(() => dancer.step(), timeBetweenSteps);
    
    // This version fails with only one initial tick in 
    // the code but passes if given two initial ticks
    // setTimeout(dancer.step, timeBetweenSteps);
  };

  dancer.setPosition = function(top, left) {
    const styleSettings = {
      top: top,
      left: left
    };
    dancer.$node.css(styleSettings);
  };
  
  dancer.setPosition(top, left);

  dancer.step();

  return dancer;
};

const makeBlinkyDancer = function(top, left, timeBetweenSteps) {
  const blinkyDancer = makeDancer(top, left, timeBetweenSteps);

  const oldStep = blinkyDancer.step;

  blinkyDancer.step = function() {
    oldStep();
    blinkyDancer.$node.toggle();
  };

  return blinkyDancer;
};

The problem:

If the SetTimeout callback is just the step function, setTimeout(dancer.step, timeBetweenSteps), the test fails unless an extra tick of clock.tick(timeBetweenSteps) is given. On the other hand, if you wrap the step function and pass the wrapper to the callback, setTimeout(() => dancer.step(), timeBetweenSteps), then the test passes just fine with only 1 initial tick.

My question:

Why does having a wrapped function make the test pass? I have already figured out multiple ways to make the test pass that I can sort of imagine an explanation for why they pass, but I can’t come up with anything great for this one. The only leads I have are that Sinon replaces the setTimeout function with a synchronous version in testing environments, so maybe that messed with the functionality.

Is there a way to get list of apps in firebase via API

I have created a project in firebase which has 10 apps in it. Is there a way to get the list of apps in that project via API? So far I found this

curl -X GET 
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" 
  "https://firebase.googleapis.com/v1beta1/projects/YOUR_PROJECT_ID/apps"

I have create a new private key in service accounts to the the token but still getting 404. Is there any API provided by google?

Fullcalendar header toolbar responsive

I am working with the FullCalendar JS library.

enter image description here

Here is the image of the HTML/CSS classes..

I have this in my style:

.fc-header-toolbar {
    min-height: 250px;
}
.fc-toolbar-chunk {
    min-width: 100% !important;
    display: block;
    background: red !important;
}

Which is resulting in the below.

enter image description here

I would like them under eachother, but it keeps pushing the divs out of the window.

Here it is in full window (desktop), which is fine.

Best case idea would be to get rid of some of those buttons at the top.

    headerToolbar: {
        left: 'title',
        right: 'prev,next today ,dayGridMonth,timeGridWeek,timeGridDay'
    },

I have the above for the settings, would be would be great it is was possible to do something like this, butI tried and it did not work.

headerToolbar: window.mobilecheck() ? {center: prev,next} : {left: ‘title’,right: ‘prev,next today ,dayGridMonth,timeGridWeek,timeGridDay’};

window.mobilecheck() is doing this…..

window.mobilecheck = function() {
    var check = false;
    (function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
    return check;
};

Is there a good way to handle the header for mobile in v5 FullCalendar?

enter image description here

problem using “promise.all” in a loop of image carousel

the 2 promises are:
1- loading the next image Load_Img_p.
2- a waiting animation before moving to the next image Timing_Anim_p.

It also has a visual animation encouraging you to wait while waiting for the next image to fully load Hourglass_f.

the idea is this:
execute in parallel Timing_Anim_p and Load_Img_p.

in the case of Timing_Anim_p before Load_Img_p is resolved, show Wait_Img_Load
this is done by a simple flag named imgOnLoad

code for Load_Img_p

var imgOnLoad = false;

const Load_Img_p = (imgScr ) => new Promise( (resolve ) => 
  {
  imgOnLoad   = true;
  const img   = new Image();
  img.onload  =()=>{ imgOnLoad = false; resolve( img )  };
  img.onerror =()=>{ imgOnLoad = false; resolve( null ) }; 
  img.src     = imgScr;
  })

in situ code test for Hourglass_f and Timing_Anim_p

var imgOnLoad = true;  // need also this one to reject other user commands on interface. 

const
  hourglass_elm = document.querySelector('#hourglass')
, Hourglass_f   = (run=false) =>
    {
    hourglass_elm.classList.toggle('showHourglass', run);
    }
, Timing_Anim_e = document.querySelector('#Timing-Anim-bar')
, Timing_Anim_p =()=> new Promise( (resolve ) =>
    {
    Timing_Anim_e.addEventListener('transitionend', ()=>
      {
      Timing_Anim_e.classList.remove('showTiming');
      Hourglass_f(imgOnLoad);
      resolve('Timing_Anim_p ended ok');
      }
      , { once: true }
      );
    Timing_Anim_e.classList.add('showTiming');
    })
    ;

btn_test_A.onclick =_=> Hourglass_f(true);
btn_test_B.onclick =_=> Hourglass_f(false);
btn_test_C.onclick =_=> Timing_Anim_p();
body {
  background-color: #03063a;
  }
#hourglass {
  visibility        : hidden;
  width             : 100px;
  height            : 100px;
  stroke            : #ff146e;
  stroke-dasharray  : 80;
  stroke-dashoffset : 200;
  }
#hourglass.showHourglass {
  visibility : visible;
  animation  : hourglassAnim 1400ms linear infinite alternate;
  }
@keyframes hourglassAnim { to { stroke-dashoffset: 0; } }

#Timing-Anim-bar {
  width    : 500px;
  height   : 10px;
  border   : 1px #9acd32 solid;
  position : relative;
  }
#Timing-Anim-bar::before {
  position   : absolute;
  display    : block;
  top        : 0;
  left       : 0;
  height     : 100%;
  width      : 0%;
  content    : '';  
  background : #0cfa2c;
  }
#Timing-Anim-bar.showTiming::before {
  transition : width 3s linear;
  width      : 100%;
  }
<svg id="hourglass" viewbox="0 0 200 200" class="" >
  <circle id="c5" cx="100" cy="100" r="50" stroke-width="5" fill="transparent" />
</svg>
<div id="Timing-Anim-bar"></div>

<br><br>
<button id="btn_test_A">hourglass true</button>
<button id="btn_test_B">hourglass false</button>
<button id="btn_test_C">test Timing_Anim_p</button>

complete image change loop code, but without using promise.ALL:

const 
  img_box = document.querySelector('#img-box')
, imgs_src_list =
    [ 'https://picsum.photos/id/124/400/300.webp'
    , 'https://picsum.photos/id/146/400/300.webp'
    , 'https://picsum.photos/id/155/400/300.webp'
    , 'https://picsum.photos/id/219/400/300.webp'
    ];
var 
  imgOnLoad = false
, img_index = 0;
  ;
const
  hourglass_elm = document.querySelector('#hourglass')
, Hourglass_f   = (run=false) =>
    {
    hourglass_elm.classList.toggle('showHourglass', run);
    }
, Timing_Anim_e = document.querySelector('#Timing-Anim-bar')
, Timing_Anim_p =()=> new Promise( (resolve ) =>
    {
    Timing_Anim_e.addEventListener('transitionend', ()=>
      {
      Timing_Anim_e.classList.remove('showTiming');
      Hourglass_f(imgOnLoad);
      resolve('Timing_Anim_p ended ok');
      }
      , { once: true }
      );
    Timing_Anim_e.classList.add('showTiming');
    })
, Load_Img_p = (imgScr ) => new Promise( (resolve ) => 
    {
    imgOnLoad   = true;
    const img   = new Image();
    img.onload  =()=>{ imgOnLoad = false; resolve( img )  };
    img.onerror =()=>{ imgOnLoad = false; resolve( null ) }; 
    img.src     = imgScr;
    })
, chkBxPlayer = document.querySelector('#chkBx-player')
  ;
chkBxPlayer.addEventListener('change',()=>
  {
  if (chkBxPlayer.checked)
    {
    carousel_Loop();
    }
  else
    {
    Hourglass_f(false);
    Timing_Anim_e.classList.remove('showTiming');
    }
  })
async function carousel_Loop()
  {
  let nxt_src, nxt_imgIdx = img_index
    ;
  while (chkBxPlayer.checked)  
    {
    nxt_imgIdx = ++nxt_imgIdx % imgs_src_list.length;
    nxt_src    = imgs_src_list[nxt_imgIdx];

    await Timing_Anim_p();
    if (!chkBxPlayer.checked) break;

    Hourglass_f(true);
    
    let newImg = await Load_Img_p( nxt_src );

    Hourglass_f(false);

    if (!chkBxPlayer.checked) break;
    if (newImg===null)
      {
      chkBxPlayer.checked = false;
      console.log('Image loading error', nxt_src );
      break;
      }
    img_index = nxt_imgIdx;
    img_box.replaceChildren( newImg );
    }
  Hourglass_f(false); // some security...
  }
body {
  background-color: #03063a;
  }
#img-box, label {
  margin        : 20px;
  border        : 1px whitesmoke solid;
  padding       : 10px;
  width         : fit-content;
  height        : fit-content;
  background    : lightgrey;
  border-radius : 5px;
  position      : relative
  }
#hourglass {
  position    : absolute;
  top         : 50px;
  left        : 50px;
  visibility        : hidden;
  width             : 100px;
  height            : 100px;
  stroke            : #ff146e;
  stroke-dasharray  : 80;
  stroke-dashoffset : 200;
  }
#hourglass.showHourglass {
  visibility : visible;
  animation  : hourglassAnim 1400ms linear infinite alternate;
  }
@keyframes hourglassAnim { to { stroke-dashoffset: 0; } }

#Timing-Anim-bar {
  width    : 500px;
  height   : 10px;
  border   : 1px #9acd32 solid;
  position : relative;
  }
#Timing-Anim-bar::before {
  position   : absolute;
  display    : block;
  top        : 0;
  left       : 0;
  height     : 100%;
  width      : 0%;
  content    : '';  
  background : #0cfa2c;
  }
#Timing-Anim-bar.showTiming::before {
  transition : width 3s linear;
  width      : 100%;
  }
<div id="img-box">
  <img src="https://picsum.photos/id/124/400/300.webp" alt="">
  <svg id="hourglass" viewbox="0 0 220 220" class="">
    <circle cx="110" cy="110" r="50" stroke-width="10" fill="transparent" />
  </svg>
</div>
<div id="Timing-Anim-bar"></div>
<br>
<label> <input type="checkbox" id="chkBx-player" > play diaporama </label>

What I tried, but the loop stops at the first change… :/
what’s wrong ?

const 
  img_box = document.querySelector('#img-box')
, imgs_src_list =
    [ 'https://picsum.photos/id/124/400/300.webp'
    , 'https://picsum.photos/id/146/400/300.webp'
    , 'https://picsum.photos/id/155/400/300.webp'
    , 'https://picsum.photos/id/219/400/300.webp'
    ];
var 
  imgOnLoad = false
, img_index = 0;
  ;
const
  hourglass_elm = document.querySelector('#hourglass')
, Hourglass_f   = (run=false) =>
    {
    hourglass_elm.classList.toggle('showHourglass', run);
    }
, Timing_Anim_e = document.querySelector('#Timing-Anim-bar')
, Timing_Anim_p =()=> new Promise( (resolve ) =>
    {
    Timing_Anim_e.addEventListener('transitionend', ()=>
      {
      Timing_Anim_e.classList.remove('showTiming');
      Hourglass_f(imgOnLoad);
      resolve('Timing_Anim_p ended ok');
      }
      , { once: true }
      );
    Timing_Anim_e.classList.add('showTiming');
    })
, Load_Img_p = (imgScr ) => new Promise( (resolve ) => 
    {
    imgOnLoad   = true;
    const img   = new Image();
    img.onload  =()=>{ imgOnLoad = false; resolve( img )  };
    img.onerror =()=>{ imgOnLoad = false; resolve( null ) }; 
    img.src     = imgScr;
    })
, chkBxPlayer = document.querySelector('#chkBx-player')
  ;
chkBxPlayer.addEventListener('change',()=>
  {
  if (chkBxPlayer.checked)
    {
    carousel_Loop();
    }
  else
    {
    Hourglass_f(false);
    Timing_Anim_e.classList.remove('showTiming');
    }
  })
async function carousel_Loop()
  {
  let nxt_src, nxt_imgIdx = img_index
    ;
  while (chkBxPlayer.checked)  
    {
    nxt_imgIdx = ++nxt_imgIdx % imgs_src_list.length;
    nxt_src    = imgs_src_list[nxt_imgIdx];

    let resp = await Promise.all([ Timing_Anim_p() , Load_Img_p( nxt_src ) ]);

    Hourglass_f(false);

    let newImg = resp[1];

    if (!chkBxPlayer.checked) break;
 
    if (newImg===null)
      {
      chkBxPlayer.checked = false;
      console.log('Image loading error', nxt_src );
      break;
      }
    img_index = nxt_imgIdx;
    img_box.replaceChildren( newImg );
    }
  Hourglass_f(false); // some security...
  }
body {
  background-color: #03063a;
  }
#img-box, label {
  margin        : 20px;
  border        : 1px whitesmoke solid;
  padding       : 10px;
  width         : fit-content;
  height        : fit-content;
  background    : lightgrey;
  border-radius : 5px;
  position      : relative
  }
#hourglass {
  position    : absolute;
  top         : 50px;
  left        : 50px;
  visibility        : hidden;
  width             : 100px;
  height            : 100px;
  stroke            : #ff146e;
  stroke-dasharray  : 80;
  stroke-dashoffset : 200;
  }
#hourglass.showHourglass {
  visibility : visible;
  animation  : hourglassAnim 1400ms linear infinite alternate;
  }
@keyframes hourglassAnim { to { stroke-dashoffset: 0; } }

#Timing-Anim-bar {
  width    : 500px;
  height   : 10px;
  border   : 1px #9acd32 solid;
  position : relative;
  }
#Timing-Anim-bar::before {
  position   : absolute;
  display    : block;
  top        : 0;
  left       : 0;
  height     : 100%;
  width      : 0%;
  content    : '';  
  background : #0cfa2c;
  }
#Timing-Anim-bar.showTiming::before {
  transition : width 3s linear;
  width      : 100%;
  }
<div id="img-box">
  <img src="https://picsum.photos/id/124/400/300.webp" alt="">

  <svg id="hourglass" viewbox="0 0 220 220" class="" >
    <circle cx="110" cy="110" r="50" stroke-width="10" fill="transparent" />
  </svg>
</div>
<div id="Timing-Anim-bar"></div>
<br>
<label> <input type="checkbox" id="chkBx-player" > play diaporama </label>