Category: javascript

I am looking for help to understand how to secure HLS videos in Ant Media server.

I have tried the ip whitelisting feature but it doesn’t work. I want to stop unauthorized third-party websites from embedding my HLS ant media streams

Currently working an a app where the latest build that was submitted to production was rejected from the AppStore with the following message:

**
The app exhibited one or more bugs that would negatively impact App Store users.

Bug description: The app produced an error message upon launch.

Review device details:

• Device type: iPad Air (5th generation)
• OS version: iOS 17.4.1**

Since I currently don’t have that specific iPad laying around and all development builds on other devices work perfectly fine I’m not able to debug any issues. The TestFlight versions also work as expected as well as previous builds that got accepted by the app store and are currently in production.

The changes inside this latest build were only minor UI related changes which didn’t impact any dependencies.

One suggestions is that it could be caused by firebase analytics since the google-service.json was updated as well. But don’t know if those changes would have any effect on an ios build.

I try to finde some ways to reproduce this issue in the coming days.

Has someone experienced this issue or any suggestions on how to process further?

Dependencies:

“dependencies”: {
“@gorhom/bottom-sheet”: “^4.4.7”,
“@react-native-async-storage/async-storage”: “1.18.2”,
“@react-native-masked-view/masked-view”: “0.2.9”,
“@react-navigation/bottom-tabs”: “^6.5.8”,
“@react-navigation/material-top-tabs”: “^6.6.3”,
“@react-navigation/native”: “^6.1.9”,
“@react-navigation/stack”: “^6.3.17”,
“axios”: “^1.4.0”,
“cocoapods”: “^0.0.0”,
“eas”: “^0.1.0”,
“expo”: “~49.0.13”,
“expo-blur”: “~12.4.1”,
“expo-camera”: “~13.4.4”,
“expo-checkbox”: “~2.4.0”,
“expo-constants”: “~14.4.2”,
“expo-crypto”: “~12.4.1”,
“expo-dev-client”: “~2.4.12”,
“expo-device”: “~5.4.0”,
“expo-font”: “~11.4.0”,
“expo-image-picker”: “~14.3.2”,
“expo-intent-launcher”: “^10.7.0”,
“expo-linear-gradient”: “~12.3.0”,
“expo-linking”: “~5.0.2”,
“expo-media-library”: “~15.4.1”,
“expo-notifications”: “^0.20.1”,
“expo-secure-store”: “~12.3.1”,
“expo-splash-screen”: “~0.20.5”,
“expo-status-bar”: “~1.6.0”,
“expo-updates”: “~0.18.19”,
“lottie-react-native”: “5.1.6”,
“ntp2”: “^0.0.3”,
“permissions”: “^0.1.0”,
“react”: “18.2.0”,
“react-native”: “0.72.6”,
“react-native-gesture-handler”: “~2.12.0”,
“react-native-maps”: “1.7.1”,
“react-native-pager-view”: “6.2.0”,
“react-native-paper”: “^5.10.3”,
“react-native-reanimated”: “^3.3.0”,
“react-native-safe-area-context”: “4.6.3”,
“react-native-screens”: “~3.22.0”,
“react-native-size-matters”: “^0.4.0”,
“react-native-tab-view”: “^3.5.2”,
“react-native-uuid”: “^2.0.1”
},

Submitted an app to Review in AppStore Connect. Got rejected due to an app crash. Not able to reproduce the crash or see any logs.

My Portfolio website works fine on PC and laptop but on mobile it gets locked on the home page and then I can’t Scroll the website. I Change so many Codes In JS and CSS But that problem not solved
how Can I Fix it?

I want my portfolio website to work well on mobile phones too

I’m experiencing a big problem with my reactjs project. I’m using react-router-dom for the routing, and the routes and the urls are correct but when i try to enter the product description the url gets “corrupted?” idk what to call it. here is the correct url (localhost:3000/product/661542f7c301d72e2fb103c4), and here is the url that i get when i go to the product descriptions (http://localhost:3000/%7B%60/product/$%7Bproduct._id%7D%60%7D).

Here is App.js:

import './App.css';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Footer from './components/layout/Footer';
import Header from './components/layout/Header';
import Home from './components/Home';
import ProductDetails from './components/product/ProductDetails';

function App() {
  return (
    <Router>
      <div className="App">
        <Header />
        <div className="container container-fluid">
          <Routes>
            <Route path="/" Component={Home} exact/>
            <Route path="/product/:id" component={ProductDetails} exact/>
          </Routes>
        </div>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

This is the ProductDetails page (its just a template for now and has ne functionality):

import React, { Fragment, useEffect } from "react";
import { useAlert } from "react-alert";
import {Carousel } from 'react-bootstrap'
import { useDispatch, useSelector } from "react-redux";
import { getProductDetails, clearErrors } from "../../actions/productActions";
import Loader from "../layout/Loader";
import MetaData from "../layout/MetaData";

const ProductDetails = () => {
  return (
    <div className="row f-flex justify-content-around">
      <div className="col-12 col-lg-5 img-fluid" id="product_image">
        <img
          src="https://i5.walmartimages.com/asr/
                1223a935-2a61-480a-95a1-21904ff8986c_1.17fa3d7870e3d9b1248da7b1144787f5.jpeg?
                odnWidth=undefined&odnHeight=undefined&odnBg=ffffff"
          alt="sdf"
          height="500"
          width="500"
        />
      </div>

      <div className="col-12 col-lg-5 mt-5">
        <h3>onn. 32” className HD (720P) LED Roku Smart TV (100012589)</h3>
        <p id="product_id">Product # sklfjdk35fsdf5090</p>

        <hr />

        <div className="rating-outer">
          <div className="rating-inner"></div>
        </div>
        <span id="no_of_reviews">(5 Reviews)</span>

        <hr />

        <p id="product_price">$108.00</p>
        <div className="stockCounter d-inline">
          <span className="btn btn-danger minus">-</span>

          <input
            type="number"
            className="form-control count d-inline"
            value="1"
            readOnly
          />

          <span className="btn btn-primary plus">+</span>
        </div>
        <button
          type="button"
          id="cart_btn"
          className="btn btn-primary d-inline ml-4"
        >
          Add to Cart
        </button>

        <hr />

        <p>
          Status: <span id="stock_status">In Stock</span>
        </p>

        <hr />

        <h4 className="mt-2">Description:</h4>
        <p>
          Binge on movies and TV episodes, news, sports, music and more! We
          insisted on 720p High Definition for this 32" LED TV, bringing out
          more lifelike color, texture and detail. We also partnered with Roku
          to bring you the best possible content with thousands of channels to
          choose from, conveniently presented through your own custom home
          screen.
        </p>
        <hr />
        <p id="product_seller mb-3">
          Sold by: <strong>Amazon</strong>
        </p>

        <button
          id="review_btn"
          type="button"
          className="btn btn-primary mt-4"
          data-toggle="modal"
          data-target="#ratingModal"
        >
          Submit Your Review
        </button>

        <div className="row mt-2 mb-5">
          <div className="rating w-50">
            <div
              className="modal fade"
              id="ratingModal"
              tabIndex="-1"
              role="dialog"
              aria-labelledby="ratingModalLabel"
              aria-hidden="true"
            >
              <div className="modal-dialog" role="document">
                <div className="modal-content">
                  <div className="modal-header">
                    <h5 className="modal-title" id="ratingModalLabel">
                      Submit Review
                    </h5>
                    <button
                      type="button"
                      className="close"
                      data-dismiss="modal"
                      aria-label="Close"
                    >
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div className="modal-body">
                    <ul className="stars">
                      <li className="star">
                        <i className="fa fa-star"></i>
                      </li>
                      <li className="star">
                        <i className="fa fa-star"></i>
                      </li>
                      <li className="star">
                        <i className="fa fa-star"></i>
                      </li>
                      <li className="star">
                        <i className="fa fa-star"></i>
                      </li>
                      <li className="star">
                        <i className="fa fa-star"></i>
                      </li>
                    </ul>

                    <textarea
                      name="review"
                      id="review"
                      className="form-control mt-3"
                    ></textarea>

                    <button
                      className="btn my-3 float-right review-btn px-4 text-white"
                      data-dismiss="modal"
                      aria-label="Close"
                    >
                      Submit
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductDetails;

I’m using Postman for the methods (get, post, delete,…) and this is the method and the answer

{{DOMAIN}}/api/v1/product/661542f7c301d72e2fb103c4

{
    "success": true,
    "product": {
        "_id": "661542f7c301d72e2fb103c4",
        "name": "Diamonds - Hip Hop Samples",
        "price": 10,
        "ratings": 4,
        "images": [
            {
                "public_id": "product/productNumber211",
                "url": "//cymatics.fm/cdn/shop/products/diamonds-h1200-min_1080x.png?v=1579721670 1080w",
                "_id": "661542f7c301d72e2fb103c5"
            }
        ],
        "category": "Pack",
        "seller": "Alexandar",
        "numOfReviews": 10,
        "reviews": [],
        "user": "65f9975e64c530b7ccde88f3",
        "createdAt": "2024-04-09T13:30:31.787Z",
        "__v": 0
    }
}

and lastly here is the javascript method for getting the product description:

export const getProductDetails = (id) => async (dispatch) => {
    try {
        dispatch({ type: PRODUCTS_DETAILS_REQUEST });

        const {data} = await axios.get(`/api/v1/product/${id}`);

        dispatch({
            type: PRODUCTS_DETAILS_SUCCESS,
            payload: data.product
        });
    } catch (error) {
        dispatch({
            type: PRODUCTS_DETAILS_FAIL,
            payload: error.response.data.message
        });
    }
};

I hope that code helps. Thanks in advance!

I work with reactive forms in my angular-project and i use mat-country-select for displaying countries in select in my child FormComponent.

<mat-select-country class="full-width"
                            [formControl]="form.controls.country"
                            [required]="true"
                            appearance="outline"
                            [itemsLoadSize]="0"
                            [value]="DEFAULT_COUNTRY"
                            label="Choose country">
          
        </mat-select-country>

I try to make modal dialog window for updating an Player in parent PlayerComponet, that has such structure as below.

export interface Player extends BaseResponse {
  lastName: string;
  firstName: string;
  dateOfBirth: Date;
  country: string;
  height: number;
  weight: number;
  position: string;
  jerseyNumber: number;
  teamName: string;
  teamId?: string | null;
  photoPath?: string | null;
}

in PlayerComponent before open update dialog window, i should initialize and pass form to my FormComponent

export class PlayersComponent implements OnInit {
  countries: Country[] = COUNTRIES;
 playerActionsForm!: FormGroup<PlayerActionsForm>;

fillUpdatePlayerForm(player: Player) {
    this.playerActionsForm.controls.id.setValue(player.id);
    this.playerActionsForm.controls.firstName.setValue(player.firstName);
    this.playerActionsForm.controls.lastName.setValue(player.lastName);
    this.playerActionsForm.controls.birthDay.setValue(player.dateOfBirth);
    const country = this.countries.find(
      (country) => country.name === player.country,
    );
    this.playerActionsForm.controls.country.setValue(country ? country : null);
    this.playerActionsForm.controls.height.setValue(player.height);
    this.playerActionsForm.controls.weight.setValue(player.weight);
    this.selectTeams$
      .pipe(
        map((teams) => teams?.find((team) => team.id === player.teamId)),
        take(1),
        untilDestroyed(this),
      )
      .subscribe((team) => {
        this.playerActionsForm.controls.team.setValue(team ? team : null);
      });
    this.playerActionsForm.controls.jerseyNumber.setValue(player.jerseyNumber);
    this.playerActionsForm.controls.position.setValue(player.position);
    this.playerActionsForm.controls.experiences.setValue([]);
  }

  initializeActionsForm() {
    this.playerActionsForm = new FormGroup<PlayerActionsForm>({
      id: new FormControl(''),
      firstName: new FormControl('', [
        Validators.required,
        Validators.pattern(NAME_PATTERN),
      ]),
      lastName: new FormControl('', [
        Validators.required,
        Validators.pattern(NAME_PATTERN),
      ]),
      birthDay: new FormControl(null, [
        Validators.required,
        dateValidator(moment().subtract(18, 'years').toDate(), 'max'),
      ]),
      country: new FormControl(null, Validators.required),
      height: new FormControl(1.01, [
        Validators.required,
        Validators.min(1.01),
      ]),
      weight: new FormControl(50.01, [
        Validators.required,
        Validators.min(50.01),
      ]),
      team: new FormControl(null),
      position: new FormControl('', Validators.required),
      jerseyNumber: new FormControl(0, [
        Validators.required,
        Validators.min(0),
      ]),
      experiences: new FormArray<FormGroup<PlayerExperienceForm>>([]),
    });
  }

  ngOnInit(): void {
    this.initializeActionsForm();
    
  }

I try to use viewChild in order to get Input property of mat-country-select Countries but it does not work. Now i use my predefined array COUNTRIES, that had been manually created. But i need solution, where i can easily get a vertain country by name without manually created constants

I’m using LightningChart JS to display live moving spectrogram heatmap.

I want to draw rectangles on the live heatmap to “circle” signals, I want the rectangle to move with the heatmap.

Is there a way to do it?

Thanks

Surprisingly, this simply code:

<!DOCTYPE html>
<html>
<body>
<h1> Keyboard input test</h1>
<script>
document.addEventListener('keydown', function(event) {
    const pressedKey = event.key;
    console.log(pressedKey)
});
</script>
</body>
</html>

works differently on Windows and Ubuntu when you try to type an accents char like Spanish é or á using Dead key. On windows you will see ‘Dead’ first then correct char (é or á), but on Ubuntu you will get ‘Dead’ and then simple ascii char (e or a).
Looks like there is no way to get correct char in this case. I can’t use input or textarea field in my particular task, so I wonder if it is actually so.
I can’t believe that it is necessary to path the operating system just to achieve such a simple thing…

I’m encountering an issue when using Puppeteer, and I really need some help, like in the code snippet below, the click function only works the first time. The second time, it doesn’t work even though the code still runs through the second block.

//......
const page = await browser.newPage();
await page.goto(link, { waitUntil: 'networkidle0' });
console.log("Open Page Success");

// IT WORKING
await page.evaluate(() => {
        document.querySelector('div[aria-label=Close]').click();
    });
console.log("Closed Popup");

// IT NOT WORKING
await page.evaluate(() => {
        document.querySelector('div.class-link').click();
    });
console.log("Opened Link");

//....

const btnOpenLink = page.$('div.class-link')
await btnOpenLink.click()

It’s not working

I want to create a simple Chrome extension to modify the CSS of a website, but it still displays the original CSS of this website, then displays my CSS after a time.

I want my extension to use my CSS immediately, not load original the CSS first.

I can’t use “document_start” because my extension uses DOM to modify the CSS, “document_end” is not working.

What should I do?

So i’ve made a very simple code where if i click on a div it changes it’s color to red from aqua, but unfortunately it doesn’t seem to work no matter how hard i try.

HTML CODE:

<body>
    <div id="imgcontainer">

    </div>
    
</body>
<script src="script.js"></script>
</html>

And this is the Javascript used :

let imgchanger = document.querySelector("#imgcontainer");

imgchanger.addEventListener("Click", function(){
    imgchanger.style.backgroundColor = "red";
    console.log("Color changed");
})

I tried creating a div which changes it’s colour after getting clicked on from aqua to red using JS. But no matter how hard I try, it doesn’t work. I watched a hell lot of tutorials videos by now, but still it doesn’t work

I am brand new in this , I have started learning JS but I cant get one piece of code working. getDate() is suposed to return the day as a number (1-31), but i get an error ReferenceError: getDate is not defined.

am i doing anything wrong? please help
thanks
I have tried the following
c = getDate();
console.log(c);

console.log(getDate)

and I was expecting to get the day as number(1-31)
I am using Visual studio

For context:

Form created in FormAssembly. Form has been built and extensive connectors & logic structured around this checkbox value, as well as conditionally displayed sections/fields.

Client has now stated that a value in a multicheckbox field (tfa_11) should always be true and should not be able to be changed.

Is there any way to achieve the desired performance using only the existing field?

Only code currently for form itself is the attempt to disable:

document.addEventListener(“DOMContentLoaded”, function(event) {
document.getElementById(“tfa_11”).disabled = true;
});

I know I can disable checkbox but this doesn’t post data. I know that I can also have a dummy display and then process the value with the hidden field, but if I do that, all dependent conditional sections/formulas/post-processing connectors need to be remapped to account for the hidden field value.

so for school we have to programm a website, and mine is about diffent historical topics, the website includes different boxes that include a picture and text, and my goal is to add a small text beneath the Box if you have already the text ( so clicked the box to reach the page with the text )
were allowed to use HTML, CSS and Javascript.

Heres the Box code, followed by the CSS (ignore the Text Parts in German)

<div class="container">
    <div class="inner-container">
        <a href="/Weiterleitung/rom.html" class="box">
            <div class="box-content">
                <img src="/Bilder/Bild2.jpg" alt="Römische Stadt">
                <div class="box-text">
                    <h2>Rom (800BC-500 AD)</h2>
                    <p>Die Antike war eine Epoche im Mittelmeerraum von 800 vor Christus bis 500 nach Christus. Normalerweise bezeichnest du damit das antike Griechenland und das Römische Reich.</p>
                </div>
            </div>
        </a>

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.container .inner-container {

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 50px;
}

h1 {

  text-align: center;
  text-decoration: underline;
}

p {
  margin-bottom: 15px;
}

footer {
  text-align: center;
  margin-top: 50px;
  padding: 20px;
  background-color: #52565a;
  color: #fff;
}

.box {
  width: 400px;
    color: aliceblue;
    text-decoration: none;
    border: 2px aliceblue solid;
    border-radius: 25px;
    padding: 5px;
    transition: all .2s ease-in-out;

}

.box:hover {
    background-color: #ff0000;
    border: 2px solid #ff0000;
}

.box img {
width: 100%;
border-radius: 25px



}

}

I tied AI, different Websites but found nothing, thanks in advance

I use 20.2.0 node version and use 9.8.1 npm version. Why cypress is complaining about this EXPORT keyword? Can somebody assist me here, please?

When I use export keyword as below and try to use this function in my Cypress config file it gives me that syntaxError. I feel like I am missing some dependencies but I don’t know what is missing inside package.json.

export async function generateTestsReport(report) {
console.log(Generating Test Report);
// more stuff here...
}

Thank you all for the help.

In Vue 2 it used to be possible to dynamically access component properties in template using a computed property that can access all component properties with this keyword:

<script>
(...)
computed: {
    $property() {
      return (key) => this[key]
    },
  },
(...)
</script>

<template>
  {{ $property('foo') }} <!-- if this.foo existed, it would return this.foo here -->
</template>

This is however not working in Vue 3. Doing something similar, i.e.

<script>
(...)
setup(props, ctx) {
  const $property = computed(() => (name) => this[name])

  return {
    $property
  }
})
(...)
</script>

<template>
{{ $property('foo') }}
</template>

throws an error: Uncaught (in promise) TypeError: _ctx.$property is not a function.
Although when inspected in Vue DevTools, $property actually is a function:

Rewriting $property from computed to a regular function throws the same error.

Is there any workaround that would allow us to dynamically access component properties in templates of Vue 3 components using {{ $property('dynamicPropertyName') }}?