Category: javascript

I’m creating a JS project using Highcharts lib (tilemap component). It now looks like this:

colorAxis: {  // colors of my categories
        dataClasses: [{
            from: 1,
            to: 1,
            color: '#828ee3',
            name: 'Субъекты организации и ее представительств'
        }, {
            from: 2,
            to: 2,
            color: '#febf10',
            name: 'Прибыли в субъект из организации'
        }, {
            from: 3,
            to: 3,
            color: '#6fcf97',
            name: 'Прибыли в организацию из субъекта'
        }]
    },

Unlike other map chart, when i click on a legend item, some items disappear from map:

I was able do disable legend click, but is it possible to chage the tile color instead of fully hiding it?
Code source here

I have these below arrays of json.

const arrA = [
  {
    id: '12',
    generalId: 'B143',
    total: 10,
  },
  {
    id: '12',
    generalId: 'B145',
    total: 20,
  },
  {
    id: '13',
    generalId: 'B145',
    total: 30,
  },
  {
    id: '13',
    generalId: 'B143',
    total: 40,
  }
]

const arrB = [
  {
    generalId: 'B145',
    id: '13',
    name: 'EMP A',
    count: 1,
  },
  {
    generalId: 'B145',
    id: '12',
    name: 'EMP B',
    count: 2,
  },
  {
    generalId: 'B143',
    id: '13',
    name: 'EMP A',
    count: 3,
  },
  {
    generalId: 'B143',
    id: '12',
    name: 'EMP B',
    count: 4,
  }
]

To merge this above array of json by matching the IDs i have tried below solution.

Solution 1
const mergedResult = arrA.map((item, i) => {
  if ((item.generalId === arrB[i].generalId)) {
    return Object.assign({}, item, arrB[i]);
  }
})

const sample = Promise.all(arrA.map((item, i) => {
  if ((item.generalId === arrB[i].generalId)) {
    return Object.assign({}, item, arrB[i]);
  }
})
)

But it is throwing the error that generalId is undefined.

Result i wanted is like:

const Result = [
  {
    generalId: 'B145',
    id: '13',
    name: 'EMP A',
    count: 1,
    total: 30,
  },
  {
    generalId: 'B145',
    id: '12',
    name: 'EMP B',
    count: 2,
    total: 20,
  },
  ... 
]

I have wrote react native app and i have a complex problem. I write a hook and i get a data here from my api. My api works. But when i show this datas on my react native project. I got this datas on fetchCart() but when i send this datas to Cart.jsx. I got undefined for const { data, loading, error, refetch } I dont solve this problems What can i do HELP!!!!! My codes in here

fetchCart.js

import AsyncStorage from "@react-native-async-storage/async-storage";
import axios from "axios";
import { useState, useEffect } from "react";


const fetchCart = async () => {
    const [data, setData] = useState([]);
    const [loading, setLoader] = useState(false);
    const [error, setError] = useState(null);


    const fetchData = async () => {
        setLoader(true);
        const token = await AsyncStorage.getItem('token');

        try {
            const endpoint = 'http://localhost:3000/api/car/find';

            const headers = {
                'Content-Type': 'application/json',
                'token': 'Bearer ' + JSON.parse(token)
            };

            const response = await axios.get(endpoint, { headers });
            const cartProducts = response.data[0].products;
        
            setData(cartProducts);
            setLoader(false); 
        } catch (error) {
            setError(error);
        } finally {
            setLoader(false);
        }
    }

     
    useEffect(() => {
        fetchData();
    }, [])

  
    const refetch = () => {
        setLoader(true);
        fetchData();
    }

    return { data, loading, error, refetch }
};

export default fetchCart;

and my Cart.jsx

import { FlatList, TouchableOpacity, Text, View, ActivityIndicator } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import React from "react";
import styles from "./cart.style";
import { Ionicons } from "@expo/vector-icons";
import { COLORS } from "../constants";
import fetchCart from "../hook/fetchCart";

const Cart = ({ navigation }) => {
  const { data, loading, error, refetch } = fetchCart();
  
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.titleRow}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Ionicons
            name="chevron-back-circle"
            size={30}
            color={COLORS.primary}
          ></Ionicons>
        </TouchableOpacity>
        <Text style={styles.titletxt}>Cart</Text>
      </View>

      {loading ? (<ActivityIndicator/>)
      :(<FlatList
        data={data}
        keyExtractor={(item) => item._id}
        renderItem={({item}) => <Text>{item.cartItem.title}</Text>}
      />)
      }


    </SafeAreaView>
  );
};

export default Cart;

The problem is that when I reduce the page sizes my navigation bar should be hidden and the navigation menu button will appear, so when I open the navigation menu my background will be blurry and very white the items in the background will look blurry and the menu items will appear in front of me but I don’t know why The menu appears without the background blur effect
***i added an image below ***

Html Code:

<nav id="header">
        <div class="nav-logo">
            <p class="nav-name">Om</p>
            <span>.</span>
        </div>
        <div class="nav-menu" id="myNavMenu">
            <ul class="nav_menu_list">
                <li class="nav_list">
                    <a href="#home" class="nav-link">Home</a>
                    <div class="circle"></div>
                </li>
                <li class="nav_list">
                    <a href="#about" class="nav-link">About</a>
                    <div class="circle"></div>
                </li>
                <li class="nav_list">
                    <a href="#projects" class="nav-link">Projects</a>
                    <div class="circle"></div>
                </li>
                <li class="nav_list">
                    <a href="#contact" class="nav-link">Cantact</a>
                    <div class="circle"></div>
                </li>
            </ul>
        </div>
        <div class="nav-button">
            <button class="btn">Download Cv<i class="fa-solid fa-file"></i></button> 
            
        </div>
        <div class="nav-menu-btn">
        <i class="fa-solid fa-bars" onclick="myMenuFunction()"></i>
        </div>
     </nav>

Css code:

nav{
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    line-height: 90px;
    background: var(--body-color);
    padding-inline: 9vw;
    transition: .3s;
    z-index: 100;
}
.nav-logo{
    position: relative;
}

.nav-name{
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color-third);
}
.nav-logo span{
    position: absolute;
    top: -10px;
    right: -20px;
    font-size: 3em;
    color: var(--text-color-second);
}
.nav-menu, .nav_menu_list{
    display: flex;
}
.nav-menu, .nav_list{
   list-style: none;
   position: relative;
}

.nav-link{
    text-decoration: none; 
    color: var(--text-color-second);
    font-weight: 500;
    padding-inline: 15px;
    margin-inline: 20px;
}

.nav-menu-btn{
     display: none;
}

.nav-menu-btn i{
    font-size: 28px;
    cursor: pointer;
}

@media only screen and (max-width:900px) {
    .nav-button{
        display: none;
    }
    .nav-menu.responsive{
        left: 0;
    }

    .nav-menu{
        position: fixed;
        top: 80px;
        left: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;   
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(50px);
        width: 100%;
        min-height: 450px;
        height: 90vh;
        transition: .3s;
    }

    .nav_menu_list{
        margin-top: 100px;
        flex-direction: column;
    }
    .nav-menu-btn{
        display: flex;
        align-items: center;
        justify-content: center;
    }

Javascript code:

function myMenuFunction(){
       var menuBtn = document.getElementById("myNavMenu");

       if(menuBtn.className === "nav-menu"){
          menuBtn.className += "responsive";
       } else {
        menuBtn.className = "nav-menu";
       }
   }

/* ----ADD SHADOW ON NAVIGATION BAR WHILE SCROLLING  -----*/
   window.onscroll = function() {headerShadow()};

   function headerShadow() {
      const navHeader =document.getElementById("header");

      if(document.body.scrollTop > 50 || document.documentElement.scrollTop > 50 ) {
         navHeader.style.boxShadow = "0 1px 6px rgba(0, 0, 0, 0.1)";
         navHeader.style.height = "70px";
         navHeader.style.lineHeight = "70px";
      } else {
         navHeader.style.boxShadow = "none";
         navHeader.style.height = "90px";
         navHeader.style.lineHeight = "90px";

      }
   }

i tryed more than one color no one worked
i think nav-menu tag dosent work after responsive function

I’m building a quiz app. I need the user to try again if he answered wrong and alter him that his answer is wrong. But whenever i click on the right answer the alter(“Wrong”) will work and on the second click (whether it’s right or wrong) alter(“Right”) will work.

import React, { useState, useContext } from "react";
import { Questions } from "../Data/Questions";
import "../App.css";
import { QuizContext } from "../Context";

export default function Quiz() {
  const { score, setScore, setGameState } = useContext(QuizContext);

  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [selectedAnswer, setSelectedAnswer] = useState("");

  const NextQuestion = () => {
    if (Questions[currentQuestion].Answer === selectedAnswer) {
      setScore(score + 1);
      setCurrentQuestion(currentQuestion + 1)
    } else { 
      alert("Try again! That was wrong")   
    }
    
  };

  const FinishQuiz = () => { 
    if (Questions[currentQuestion].Answer === selectedAnswer) {
      setScore(score + 1);
    }
    setGameState("endScreen")

  };

  const handleAnswer =() => { 
    if (Questions[currentQuestion].Answer === selectedAnswer){
      alert("Good")
    } else { 
      alert("Wrong")
    }
  };

  return (
    <div className="QuizScreen">
      <h1>{Questions[currentQuestion].question} </h1>
      <div className="options">
        <button
          onClick={Event => { 
            setSelectedAnswer("optionA");
            handleAnswer();
          }}
        >
          
          <span className="Letter">A. </span>
          <img
            src={Questions[currentQuestion].optionA}
            width={110}
            height={100}
            alt="Option A"
          />
        </button>
        <button
          onClick={Event => { 
            setSelectedAnswer("optionB");
            handleAnswer();
          }}
        >
          
          <span className="Letter">B. </span>
          <img
            src={Questions[currentQuestion].optionB}
            width={110}
            height={100}
            alt="Option B"
          />
        </button>
        <button
          onClick={Event => { 
            setSelectedAnswer("optionC");
            handleAnswer();
          }}
        >
          
          <span className="Letter">C. </span>
          <img
            src={Questions[currentQuestion].optionC}
            width={110}
            height={100}
            alt="Option C"
          />
        </button>
        <button
          onClick={Event => { 
            setSelectedAnswer("optionD");
            console.log("GG")
            handleAnswer();
          }}
        >
          
          <span className="Letter">D. </span>
          <img
            src={Questions[currentQuestion].optionD}
            width={110}
            height={100}
            alt="Option D"
          />
        </button>
      </div>
      {currentQuestion === Questions.length - 1 ? (
        <button className="FinishBtn" onClick={FinishQuiz}> Finish Quiz</button>
      ): ( 
        <button className="NextBtn" onClick={NextQuestion}> Next Question!</button>
        )}
      
    </div>
  );
}

I didn’t know what to do i traced the code so many times and can’t figure out why there’s like a latency in assigning the value or checking it.

I am testing my Reddit-clone app, and i can’t seem to find my way thru fixing this problem. I tried the solutions from yt videos and none helped also I did what the docs said about this topic. My app is made using redux-toolkit. THANKS

the code below is my testing file

import React from 'react'
import { render,screen } from '@testing-library/react'
import configureStore from 'redux-mock-store'
import { Provider } from 'react-redux'
import Comments from '../Comments'
import { MemoryRouter } from 'react-router-dom'
import thunk from 'redux-thunk'
const middleware = [thunk]
const mockStore = configureStore(middleware)


const initialState = {
    comments: {
        comments: {
                data: {
                    children: [
                        {data: {id: 1, body: 'comment 1', author: 'author 1'}},
                        {data: {id: 2, body: 'comment 2', author: 'author 2'}}
                    ]
                },
        },
        selectedComments: 'selected comment',
        showButton: 'hide comments'
    }
}

test('should render the comment count in comment component', () => {
    var storeE = mockStore(initialState)
        render(  
            <Provider store={storeE}>
                <MemoryRouter>
                    <Comments/>   
                </MemoryRouter>
            </Provider>
        )
    const commentCount = screen.getByText('comment 1')

    expect(commentCount('2 comments')).toBeVisible();

})

the code below is my Comments component

import { Box, Typography, Button } from '@mui/material'
import React, { useEffect, useRef } from 'react'
import { Link } from 'react-router-dom'
import {useDispatch, useSelector} from 'react-redux'
import { getCommentsData } from '../API/Api'
import { setButton } from './CommentsSlice'
const Comments = () => {
    const dispatch = useDispatch()
    const commentsData = useSelector(state => state.comments.comments?.data?.children)
    const selectedComment = useSelector(state => state.comments.selectedComments)

    const selectedBtn = useSelector(state => state.comments.showButton)
    const commentsList = useRef()

    
    useEffect(() => {
        dispatch(getCommentsData(selectedComment))
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }, [dispatch, selectedComment])

    const hideComment = () => {
        if(selectedBtn === 'show comments'){
            dispatch(setButton('hide comments'))
        }
        if(selectedBtn === 'hide comments'){
            dispatch(setButton('show comments'))
        }
    }

    const commentItems = commentsData && commentsData.length > 0 ? (
        commentsData.map((item, idx) => (
            <Box key={item.data.id}
                sx={{color: 'white', 
                display:'flex', 
                justifyContent: 'center', 
                alignItems:'center', 
                flexDirection: 'column',
                borderBottom: '1px solid #3d3d3d',
                marginX: '70px',
                marginBottom:'50px'}}>
                    <Typography gutterBottom>Comment {idx + 1}</Typography>
                    <Box sx={{marginTop:'20px',marginBottom:'20px', textAlign:'center'}}>
                        <Typography>{item.data.body}</Typography>
                        <Typography sx={{marginTop:'10px'}}>Author: {item.data.author}</Typography>
                    </Box>
            </Box>
        ))
    ):(<Box>No Comments</Box>)


  return (
    <Box sx={{width: '100%', marginTop:'20px', marginLeft:'20px'}}>
        <Box>
            <Link to='/' onClick={hideComment}>
                <Button>Back to posts</Button>
            </Link>
        </Box>

        <Box ref={commentsList}>
            {commentItems}
        </Box>
    </Box>
  )
}

export default Comments

the code below is my comments Slice

import { createSlice } from "@reduxjs/toolkit";

export const CommentsSLice = createSlice({
    name: 'comments',
    initialState: {
        comments: [],
        selectedComments: '',
        showButton: 'show comments'
    },
    reducers:{
        setComments(state, action){
            state.comments = action.payload
        },
        setSelectedComment(state, action){
            state.selectedComments = action.payload
        },
        setButton(action, state){
            state.showButton = action.payload
        }
    }
})

export const {
    setComments,
    setSelectedComment,
    setButton
} = CommentsSLice.actions

export default CommentsSLice.reducer

I have tried making custom middleware inside the store file, which pretty much everyone showed to get over the problem. In the docs for the redux toolkit it says the same thing to change the middleware i did like they said still the same error. I changed from Jest testing to Vitest and changed the settings for that to work and still nothing.

I finished server side of cookies authorization where I in responses set cookies and i also get cookies. So now I need to check if there is Access token, but a can’t get it.

This is my redux thunk where auto login if Access token didn’t expired:

export const getMe = createAsyncThunk(
    'auth/getMe',
    async () => {
        try {
            const { data } = await axios.get(`/users/user`)

            console.log(document.cookie)

            return data
        } catch (error) {
            console.log(error)
        }
    }
)

In line where i log in console document.cookie i just get empty strings, however Access token is set in cookies.

This is how I set cookies:

const accessDateExpiration = createDateForCookie(1000 * 60 * 60 * 24)

res.cookie('AccessToken', `${sessionAfterRefreshing.AccessToken}`, {
    httpOnly: true,
    secure: true,
    expires: accessDateExpiration
})

I tried using packages as js-cookie and browser-cookies, but they didn’t worked out as well.

Maybe there is problem in cookie settings I set: hhtpOnly: true, secure: true.

Can someone provided me the working JavaScript code of Clash Royale API using .fetch() method.

Or can correct my this code :

const apiUrl = 'https://api.clashroyale.com/v1/cards'; 
const token = 'my-token';
async function fetchCards() {
  try {
    const response = await fetch(apiUrl, {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json'
      }
    });

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchCards();

Code doesn’t shows the right response it shows the Status code 400
and gives message ‘bad request’.

I can retrieve the BEP-20 transaction receipt data with the transaction hash using the code below. How can I extract the addresses of the swapped tokens(tokenIn/tokenOut) and amount from the receipt?

const { Web3 } = require('web3');

// Initialize Web3 instance
const web3 = new Web3('_YOUR_PROVIDER_');

// Transaction hash of the transaction you want to analyze
const transactionHash = '0x8668568212282dcd672eb14d1fbfbee6a40cd19972b3136aed793cdf7d0c11d3';

web3.eth.getTransactionReceipt(transactionHash)
  .then((tx) => {
    console.log(tx);
  });

I have this html script (using css in another file):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Pashosh</title>
        <link href="webBootstrapbootstrap.css"/>
        <script src="webBootstrapbootstrap.js"></script>
        <script type="text/javascript" src="/eel.js"></script>
        <script type="text/javascript" src="/index.js"></script>
        <link rel="stylesheet" href="/index.css">
    </head>


    <body style="background-color:#000000">

                                                <!-- This is the header section-->
        <h1 style="color:#ffffff">Welcome to Pashosh.</h1>
        <h2 style="color:#ffffff">Simple Navigation Tests Environment</h2>
                                                <!-- This is the main button section-->
        <div class="btn-group" style="width:100%">
            <button class="button-80" role="button"  id="rcorners1" title="Choose the working directory" onclick="RunPythonOpenWorkingDir()">Working directory</button>
            <button class="button-80" role="button"  id="rcorners1" title="Add a new test">Add</button>
            <button class="button-80" role="button"  id="rcorners1" title="Remove marked tests">Remove</button>
            <button class="button-80" role="button"  id="rcorners1" title="Save current test batch">Save</button>
            <button class="button-80" role="button"  id="rcorners1" title="Load a test batch">Load</button>
            <button class="button-80" role="button"  id="rcorners1" title="Run all tests">Run</button>
            <button class="button-80" role="button"  id="rcorners1" title="Click here for documentation pdf file">Help</button>
        </div>
        <div>
        </div>

    </body>
</html>

This python function:

root = tk.Tk()
root.withdraw()
Engine = engine.Engine()

eel.init("web")

@eel.expose
def WorkDirButtonFunc():      
    working_dir = filedialog.askdirectory()
    if working_dir is not None:
        return working_dir
    else:
        return None

I also got this empty js function:

  function RunPythonOpenWorkingDir() 
  { 

    eel.WorkDirButtonFunc()(function(work_dir)
    {
        
    });
  } 

I would like the working directory button to create a header that contains the chosen working directory that was chosen in the python function. How can I do it?

(This is the css file if needed)

h1{
    text-align: center;
    font-family:andale mono, monospace;
  }
  
  h2{
    text-align: center;
    font-family:andale mono, monospace;
  }    

  #rcorners1 {
    border-radius: 5px;
    background: #d8cece;
  }



.button-80 {
background: #fff;
backface-visibility: hidden;
border-radius: .375rem;
border-style: solid;
border-width: .125rem;
box-sizing: border-box;
color: #212121;
cursor: pointer;
display: inline-block;
font-family: andale mono, monospace;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.3;
padding: .875rem 1.125rem;
position: relative;
text-align: left;
text-decoration: none;
transform: translateZ(0) scale(1);
transition: transform .2s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.button-80:not(:disabled):hover {
transform: scale(1.05);
}

.button-80:not(:disabled):hover:active {
transform: scale(1.05) translateY(.125rem);
}

.button-80:focus {
outline: 0 solid transparent;
}

.button-80:focus:before {
content: "";
left: calc(-1*.375rem);
pointer-events: none;
position: absolute;
top: calc(-1*.375rem);
transition: border-radius;
user-select: none;
}

.button-80:focus:not(:focus-visible) {
outline: 0 solid transparent;
}

.button-80:focus:not(:focus-visible):before {
border-width: 0;
}

.button-80:not(:disabled):active {
transform: translateY(.125rem);
}


.select-80 {
background: #fff;
backface-visibility: hidden;
border-radius: .375rem;
border-style: solid;
border-width: .125rem;
box-sizing: border-box;
color: #212121;
cursor: pointer;
display: inline-block;
font-family: andale mono, monospace;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.3;
padding: .875rem 1.125rem;
position: relative;
text-align: left;
text-decoration: none;
transform: translateZ(0) scale(1);
transition: transform .2s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.select-80:not(:disabled):hover {
transform: scale(1.05);
}

.select-80:not(:disabled):hover:active {
transform: scale(1.05) translateY(.125rem);
}

.select-80:focus {
outline: 0 solid transparent;
}

.select-80:focus:before {
content: "";
left: calc(-1*.375rem);
pointer-events: none;
position: absolute;
top: calc(-1*.375rem);
transition: border-radius;
user-select: none;
}

.btn-group{
  align-items: center;
}

Try to display some .xml data file through a .sef.json transformed file (initially .xsl file) with SaxonJS 2.6 (SaxonJS26.rt.js/SaxonJS26.js); got two valid .xml and .sef.json files respectively
The index.html file is as follows:

<html>
 <head>
  <meta charset="UTF-8" />
  <title>SxnTrnsct</title>
  <script type="text/javascript" src="../saxon-js2.6/SaxonJS2.rt.js"></script>
  <script type="text/javascript" src="js/sxn_tscrpt.js" ></script> 
 </head>
 <body>
  <h2>Smthn ..</h2>
  <div id="output"></div> 
 </body>
</html>

and that “sxn_tscrpt.js” goes like this:

"use strict"
var opts = {styleSheetLocation:"../xml/htrnsctstl.sef.json",sourceLocation:"../xml/trnsct.xml"}
onload = function()
    {
    SaxonJS.transform(opts,"async")
}

My os platform is windows 8/10, webserver is IIS, my CLIENT SaxonJS is 2.6 and the .sef file produced, has been generated through that xslt3 node.js module (for sure, the generated .sef.json file is valid, although understood could be certain escaping characters issues …)
Don’t know what other “under the scene” details should be provided …
Anyway, the following opera browser errors were issued when launched that index.html (localhost):

SaxonJS2.rt.js:1113 Uncaught (in promise) XError: **No stylesheet supplied**
    at Object.transform (SaxonJS2.rt.js:1113:178)
    at onload (sxn_tscrpt.js:9:17)SaxonJS2.rt.js:772
GET http://localhost/mbPrct/xml/trnsct.xml 404 (Not Found)

These sort of problems has already been risen .. but ain’t find nowhere a real, clear and reliable solution ..

If this very simple stuff could’t be fixed, how one would expect of even work with SaxonJS (2.5 .. 2.6 .. ) ?

Thank you

Hi I want to implement skip ad functionality but could not able to figure out how to do that

Here is my code

const manifestUri = 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd';
let adManager;
let video;
let container;

async function init() {
    video = document.getElementById('video');
    const ui = video['ui'];
    const controls = ui.getControls();
    const player = controls.getPlayer();

    // Initialize ad manager and load the manifest
    container = video.ui.getControls().getClientSideAdContainer();
    const skipAdButton = new shaka.ui.SkipAdButton(container, controls);

    adManager = player.getAdManager();
    adManager.initClientSide(container, video);

    // Attach event listeners
    window.player = player;
    window.ui = ui;
    player.addEventListener('error', onPlayerErrorEvent);
    controls.addEventListener('error', onUIErrorEvent);

    try {
        await player.load(manifestUri);
        console.log('The video has now been loaded!');

        // Add event listener for timeupdate to trigger custom function
        video.addEventListener('timeupdate', handleTimeUpdate);
    } catch (error) {
        onPlayerError(error);
    }
}

// code for
document.addEventListener(‘shaka-ui-loaded’, init);
document.addEventListener(‘shaka-ui-load-failed’, initFailed);

function handleTimeUpdate() {
    const triggerTime = 5;
    const currentTime = video.currentTime;
    if (currentTime >= triggerTime) {
        customFunction();
        video.removeEventListener('timeupdate', handleTimeUpdate);
    }
}

function customFunction() {
    const adsRequest = new google.ima.AdsRequest();
    adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
        'sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&' +
        'impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&' +
        'cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=';
    adManager.requestClientSideAds(adsRequest);
}

Here I am showing the ad after 5 sec, my aim is to show a skip button over player , is there any demo available for that?

I’m trying to open a link in a new tab from a Blazor Server application. I tried several methods such as

await JSRuntime.InvokeVoidAsync("open", action.ActionData, "_blank");

as well as

await JSRuntime.InvokeVoidAsync("NavigateTo", action.ActionData);

whereas the NavigateTo function appears as follows:

window.NavigateTo = (url) => {
    const link = document.createElement('a');
    link.href = url;
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    link.remove();
}

Everything is working fine in all browsers except for Safari on IOS.

Has anybody found a solution to this problem? As I found out, there is a problem opening a new tab in Safari from an asynchronous task. But I couldn’t find a way to start this synchronously from Blazor Server.

I have a page that I want to be shown before the page is loaded and when I go to another url and return to the same url, it does not load again.
i have this code for first

"use client";
import { useEffect, useState } from "react";
import CustomCursor from "./CustomCursor";
import TopHeader from "./TopHeader";
import Loading from "./Loader.js";
import Image from "next/image";
import "dotenv/config";
export function Header() {
  const [isOk, setIsOk] = useState(false);
  const [LoadingOne, setLoadingOne] = useState(true);
  useEffect(() => {
    setInterval(() => {
      setLoadingOne(false);
    }, 3500);
  }, []);
  return (
    <div className="bg-[#1F2544] relative ">
      {LoadingOne && <Loading setLoadingOne={setLoadingOne} />}
      <TopHeader isOk={isOk} setIsOk={setIsOk} />
      <CustomCursor isOk={isOk} />
    </div>
  );
}
export default Header;

and this is my Loading page

// components/Loading.js
"use client";
import { useEffect, useRef, useState } from "react";
import Typed from "typed.js";
const Loading = ({ setLoadingOne }) => {
  const el = useRef(null);

  useEffect(() => {
    const typed = new Typed(el.current, {
      strings: ["BAHRANI"],
      typeSpeed: 160,
      backSpeed: 100,
      loop: false,
      showCursor: false,
    });

    return () => {
      typed.destroy();
    };
  }, []);
  // for me
  const [hide, setHide] = useState("");
  const [heightZero, setheightZero] = useState(false);
  useEffect(() => {
    console.log(hide);
    document.body.classList.add("overflow-hidden");
    window.scrollTo(0, 0);
    setInterval(() => {
      setHide("hidden");
    }, 3500);
    setInterval(() => {
      setheightZero(true);
    }, 2500);

    setInterval(() => {
      document.body.classList.remove("overflow-hidden");
    }, 2000);
    console.log(hide);
  }, [hide]);

  return (
    <div
      className={`transition-[height] duration-1000   ${hide} ${
        heightZero ? "h-0 -mb-20" : "h-screen"
      } bg-black  flex items-center justify-center text-white z-10 fixed w-screen `}
    >
      <p
        ref={el}
        className={`text-5xl font-family-bold tracking-[40px]  ${
          heightZero ? "mb-16 " : ""
        }`}
      ></p>
    </div>
  );
};

export default Loading;

I want Loading to be executed only once and when we go to another url and return to url, Loading will not be executed i try next/router and event but not working in next js 14

When using a Ext.grid.Panel with ‘cellediting’ plugin, click on on row with tagfields/combos to start editing the field then click on combo/tagfield trigger (right triangle), seems to not open drop down values.
Works only if you press down arrow from keyboard.

Sencha Fiddle live preview: https://fiddle.sencha.com/#view/editor&fiddle/3ll2
(there are some commbined bugs for grids in this preview)