Category: javascript

I need specific fields from the csv pulled and formatted as a real estate listing (html or WordPress). I needed someone to create a specific JavaScript or input/export coding to carry out the action.

Read the CSV File: Use JavaScript to read the CSV file. You can achieve this using the FileReader API in modern browsers.

Parse CSV Data: Parse the CSV data into an array or object. You can use libraries like PapaParse to simplify the CSV parsing process.

Extract Specific Fields: Extract the specific fields you need for the real estate listing from the parsed CSV data.

Format the Data: Format the extracted fields into HTML or a format suitable for a WordPress listing.

Display the Listings: Display the formatted listings on your webpage or WordPress site.

I am trying to use something that requires third party cookies but electron blocking third party cookies won’t allow me to use it.

Is there any work around or possible fix to this issue?

The error I am getting.

Third-party cookie will be blocked. Learn more in the Issues tab.

or is this just skill issue and I have to declare war on electron to get it to work.

**The code I am using: **

const SendRequest = function(API, MESSAGE) {

    const request = new XMLHttpRequest();
    request.open("POST", API);

    request.setRequestHeader('Content-type', 'application/json');

    const params = {
        username: "local bot",
        content: MESSAGE,
        avatar_url: ""
    };

    request.send(JSON.stringify(params));

    console.log("Sent Request");

};

document.getElementById("BodyAPISendRequest").addEventListener("click", function() {

    console.log("Clicked");

    const API_TOKEN = document.getElementById("BodyAPIEntry");
    const API_MESSAGE = document.getElementById("BodyAPIMessageEntry");

    if (API_TOKEN.value.length !== 0) {
        SendRequest(API_TOKEN.value, API_MESSAGE.innerHTML);
        console.log("Starting request");
        console.log(API_TOKEN.value);
        console.log(API_MESSAGE.innerHTML);
    };

});

I am trying to make a GUI that allows you to easily send a message via webhook it was meant to be a easy project until Electron blocked third party cookies.

I was expecting it to just normally work like it does within the browser. But I guess it does not work like that with electron.

I am using datatatables to display highcharts. Everything works fine but I am not sure how to get rid of the following error when I click on button two and button one.

• DataTables warning: table id=example – Cannot reinitialise DataTable.
  For more information about this error, please see
  https://datatables.net/tn/3 DataTables warning: table id=example1 –

• Cannot reinitialise DataTable. For more information about this error,
  please see https://datatables.net/tn/3

My requirement is by on page load Chart1 should display and hide chart2 and chart3. when I click on chart1 or chart2, it should reinitialize the chart for the user to get animation effect just like chart3. How can I achieve this? Here is my code
https://codepen.io/Shawnny-Tandon/pen/bGJeOev

function initializeChart(chartId, tableId, chartTitle) {
    // Create DataTable
    const table = new DataTable(tableId, {
        searching: false,
        info: true,
        paging: false,
        sort: false
    });

    // Create chart
    const chart = Highcharts.chart(chartId, {
        chart: {
            type: 'pie',
            styledMode: false
        },
        title: {
            text: chartTitle
        },
        colors: ['#1a4480', '#e52207', '#e66f0e', '#ffbe2e', '#fee685', '#538200', '#04c585', '#97d4ea', '#009ec1', '#0076d6', '#adadad', '#8168b3', '#d72d79', '#f2938c' ],
        tooltip: {
            pointFormat: '</b> {point.y:.1f}%'
        },
        series: [
            {
                data: chartData(table)
            }
        ],
        credits: {
            enabled: false
        },
        plotOptions: {
            pie: {
                size: 270,
                innerSize:70,
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    distance: 30,
                    padding: 1,
                    style: {
                        fontSize: "12px"
                    },
                    format: '{point.y:.1f}%'
                },
                showInLegend: true  // Show legends
            }
        }
    });

    // On each draw, update the data in the chart
    table.on('draw', function () {
        chart.series[0].setData(chartData(table));
    });

    function chartData(table) {
        var data = [];
        table.rows().every(function () {
            var row = this.data();
            data.push({
                name: row[0],  // Assuming the first column is the name
                y: parseFloat(row[1])  // Assuming the second column is the numeric value
            });
        });

        return data;
    }
}

document.addEventListener('DOMContentLoaded', function () {
    // Check if Highcharts is defined before calling the function
    if (typeof Highcharts !== 'undefined') {
        initializeChart('demo-output', '#example1', 'test 2023');
        initializeChart('demo-output2', '#example', 'test 2022');

        var allSeriesData = [];
        var categories = [];

        var table = $("#example2").DataTable({
            searching: false,
            responsive: true,
            lengthChange: false,
            ordering: false,
            info: false,
            paging: false,
            initComplete: function (settings, json) {
                let api = new $.fn.dataTable.Api(settings);

                // get the x-axis caregories from the table headings:
                var headers = api.columns().header().toArray();
                headers.forEach(function (heading, index) {
                    if (index > 0 && index < headers.length) {
                        categories.push($(heading).html());
                    }
                });

                // get the seris data as an array of numbers from the table row data:
                let rows = api.rows().data().toArray();
                rows.forEach(function (row) {
                    group = {
                        name: '',
                        data: []
                    };
                    row.forEach(function (cell, idx) {
                        if (idx == 0) {
                            group.name = cell;
                        } else if (idx < row.length) {
                            group.data.push(parseFloat(cell.replace(/,/g, '')));
                        }
                    });
                    allSeriesData.push(group);
                });
            }
        });

        Highcharts.setOptions({
            lang: {
                thousandsSep: ','
            }
        });

        // Function to initialize trend chart
        function initializeTrendChart() {
            // Your trend chart initialization code here
            // Example:
            var trendChart = Highcharts.chart("chart-A", {
                chart: {
                    type: "column",
                    borderColor: 'lightgray',
                    borderWidth: 1,
                    marginTop: 50
                },
                tooltip: {
                    headerFormat: '{point.key}<br/>',
                    pointFormat: '{series.name}: <b>{point.y:.1f}%</b>'
                },
                legend: {
                    symbolRadius: 0,
                    itemStyle: {
                        color: '#000000',
                        fontSize: '16px'
                    }
                },
                colors: ['#003489', '#ED7D31', '#A5A5A5', '#FFC000', '#5B9BD5'],
                credits: {
                    enabled: false
                },
                title: {
                    text: "test3"
                },
                xAxis: {
                    categories: categories,
                    labels: {
                        style: {
                            fontWeight: '600',
                            fontSize: '16px',
                            color: '#000000'
                        }
                    }
                },
                yAxis: {
                    title: false,
                    tickInterval: 10,
                    max: 60,
                    labels: {
                        formatter: function () {
                            return Highcharts.numberFormat(this.value, 0);
                        },
                        style: {
                            fontWeight: '600',
                            fontSize: '16px',
                            color: '#000000'
                        }
                    }
                },
                series: allSeriesData
            });
        }

        // Button click event listeners
        $('.usa-button').on('click', function () {
            var buttonId = $(this).attr('id');

            // Toggle chart visibility based on button click
            if (buttonId === 'previous') {
                $('#chart2').show();
                $('#chart1').hide();
                $('#chart3').hide();
              initializeChart('demo-output2', '#example', 'test Awards by NAICS Codes, FY 2022');
            } else if (buttonId === 'trend') {
                $('#chart2').hide();
                $('#chart1').hide();
                $('#chart3').show();
                initializeTrendChart(); // Reinitialize trend chart
            } else {
                // Default case, show chart1
                $('#chart2').hide();
                $('#chart1').show();
                $('#chart3').hide();
               initializeChart('demo-output', '#example1', 'test Awards by NAICS Codes, FY 2023');
            }

            // Highlight the active button
            $('.usa-button').removeClass('active');
            $(this).addClass('active');
        });

        // Set default highlight on 2023 button
        $('#current').addClass('active');
    }
});

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/dataTables.js"></script>

 <script src="https://code.highcharts.com/highcharts.js"></script>

  </head>
  <body>




<div class="ar-controls grid-row tablet:flex-justify-start">
<div class="tablet:grid-col-auto margin-bottom-205"><button id="current" class="usa-button usa-button--outline" title="Select to see related information below">one</button> <button id="previous" class="usa-button usa-button--outline" title="Select to see related information below">two</button> <button id="trend" class="usa-button usa-button--outline" title="Select to see related information below">three</button></div>
</div>

<div id="chart1">
<div id="demo-output" class="chart-display" style=" margin-bottom: 2em; height: 500px; border: solid 1px lightgray;"></div>

<table id="example1" class="display" style=" width: 100%;"><thead>
<tr>
<th scope="col">2023</th>
<th scope="col">Percent</th>
</tr>

</thead>
<tr>
<td scope="row">ABC</td>
<td>45.9%</td>
</tr>

<tr>
<td scope="row">DEF</td>
<td>22.0%</td>
</tr>

<tr>
<td scope="row">GHI</td>
<td>13.6%</td>
</tr>

</table>
</div>

<div id="chart2" style=" display: none;">
<div id="demo-output2" class="chart-display2" style=" margin-bottom: 2em; height: 680px; border: solid 1px lightgray;"></div>

<table id="example" class="display" style=" width: 100%;"><thead>
<tr>
<th scope="col">2022</th>
<th scope="col">Percent</th>
</tr>

</thead>
<tr>
<td>AAA</td>
<td>51.90%</td>
</tr>

<tr>
<td>BBB</td>
<td>18.60%</td>
</tr>

</table>
</div>

<div id="chart3" style=" display: none;">
<div id="chart-A" style=" width: 100%; height: 500px;"></div>

<table class="row-border stripe no-footer cell-border padding-top-5" id="example2" style=" width: 100%;"><thead>
<tr>
<th>Year</th>
<th>column1</th>
<th>column2</th>
<th>column3</th>

</tr>

</thead>
<tr>
<td scope="row" style=" text-align: left; white-space: nowrap;">FY19</td>
<td style=" text-align: left;">42.7%</td>
<td style=" text-align: left;">17.3%</td>
<td style=" text-align: left;">9.5%</td>

</tr>

<tr>
<td scope="row" style=" text-align: left;">FY20</td>
<td style=" text-align: left;">49.5%</td>
<td style=" text-align: left;">16.3%</td>
<td style=" text-align: left;">3.4%</td>

</tr>


</table>
</div>
</div>

**This is what the terminal says when I tried to npm run dev.
**

npm ERR! code EJSONPARSE
npm ERR! path C:UsersuserDocumentsUdemyNext Projectsnext-reviews/package.json
npm ERR! JSON.parse Unexpected string in JSON at position 109 while parsing '{  
npm ERR! JSON.parse     "name": "next-reviews",
npm ERR! JSON.parse     "pri'
npm ERR! JSON.parse Failed to parse JSON data.
npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript.

This is what was in the code.

{
    "name": "next-reviews",
    "private": true,
    "scripts":{
        "dev": "next dev"
    },
    "dependencies": {
        "next": "^14.1.3",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
}

This is my first time using VUE and I want to reuse a header component that takes in a backgroundImage string variable. Tried researching it and can’t find any tutorials that helps solve this.

Header.vue – the actual component that the image will appear on

<template>
  <header :style="{ ...headerStyle, backgroundImage: 'url(' + imageUrl + ')' }">
    <h1>Place Holder Text: <br> {{ headings.Index }}</h1>
  </header>
</template>

<script>
export default {
  name: 'ImageHeader',
  props: {
    imageUrl: String
  },
  data() {
    return {
      headings: {
        Index: "Home Page",
        About: "About Page"
      },
      scrolled: false,
    };
  },
  computed: {
    headerStyle() {
      return {
        padding: this.scrolled ? '10px' : '50px 10px',
        color: this.scrolled ? 'black' : 'white',
        textAlign: 'center',
        fontWeight: 'bold',
        position: 'fixed',
        top: 0,
        width: '100%',
        height: this.scrolled ? '100px' : '56rem',
        transition: '0.5s',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        margin: 'auto',
        lineHeight: this.scrolled ? '2rem' : '3rem',
        zIndex: 1,
      };
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.scrolled = window.scrollY > 50;
    }
  }
};
</script>

App.vue – contains Header component and another component

<template>
  <div>
    <!-- Pass headerImageUrl to the ImageHeader component -->
    <ImageHeader :imageUrl="headerImageUrl"/>
    <SideBar/>
    <!-- Your main content here -->
  </div>
</template>

<script>
import SideBar from './components/SideBar.vue';
import ImageHeader from './components/Header.vue';

export default {
  name: 'App', 
  components: {
    ImageHeader,
    SideBar
  }
}
</script>

index.html – where I want to insert the path to the file

<body>
     <div id="app" image-url="../src/assets/ImageName.png" </div>
</body>

I’ve swapped out some stuff like the image names and content text for security and I’ve only included the relevant div element in the html file. I’m using the default vue directory template if that helps visualise what files and paths I’m working with.

The closest I’ve gotten to this working is declaring the file path with a png/jpeg file on the internet in App.vue but this hardcodes it for every page I want to use the App component on.

    <h1 id="div3">{{ pageTitle }}</h1>
    <div class="container">
        <button (click)="startVideo()" id="div4">Show Me</button>
        <div
            class="small-box-container"
            *ngIf="showVideo"
            [@fadeInOut]="fadeInOutState"
        >
            <div class="overlay">
                <div class="text">
                    <h2>Capturing emotion</h2>
                    <h4>Don't move, Stay still !!</h4>
                </div>
                <div class="countdown-container">
                    <mat-progress-spinner
                        [value]="progressValue"
                        color="warn"
                        mode="determinate"
                        diameter="50"
                        class="center-spinner"
                    ></mat-progress-spinner>
                </div>
                <img
                    id="video"
                    [src]="videoUrl"
                    alt="Video Stream"
                    class="small-box"
                />
            </div>
        </div>
    </div>

This is my html page

import { Component, OnInit, OnDestroy, ViewChild } from "@angular/core";
import { HttpClient, HttpParams } from "@angular/common/http";
import { CancelrequestService } from './cancelrequest.service';
import { ChangeDetectorRef } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
} from "@angular/animations";
import { Router } from "@angular/router";

@Component({
  selector: "app-home-page",
  templateUrl: "./home-page.component.html",
  styleUrls: ["./home-page.component.css"],
  animations: [
    trigger("fadeInOut", [
      state(
        "in",
        style({
          opacity: 1,
        }),
      ),
      transition(":enter", [style({ opacity: 0 }), animate(300)]),
      transition(":leave", [animate(300, style({ opacity: 0 }))]),
    ]),
  ],
})
export class HomePageComponent implements OnInit, OnDestroy {
  lastPrediction: string[] | null = null;
  lastPredictionValue: string | null = null;
  pageTitle: string = "How are you feeling today?";

  showVideo = false;
  videoUrl = "http://127.0.0.1:5000/video_feed";
  fadeInOutState = "out";
  countdown = 5;
  progressValue = 100; // Initial value for mat-progress-spinner
  progressInterval: any; // Interval reference
  videoComponentActive = false;
  loadingTimeout: any; // Added boolean flag
  httpSubscription: any;

  constructor(
    private router: Router,
    private cdRef: ChangeDetectorRef
  ) {
    
  }
  @ViewChild('video', { static: false }) videoElementRef: any;
  

  ngOnInit() {
    //this.startProgressInterval();
  }

  ngOnDestroy() {
    //this.clearProgressInterval();
  }

  private startProgressInterval() {
    if (!this.progressInterval) {
      const totalTime = 10; // Total time in seconds
      const intervalTime = 100; // Interval time in milliseconds
      const steps = (totalTime * 1000) / intervalTime; // Number of steps

      let currentStep = 0;

      this.progressInterval = setInterval(() => {
        currentStep += 1;
        this.progressValue = 100 - (currentStep / steps) * 100;

        if (currentStep === steps) {
          this.clearProgressInterval();
          this.closeStream();
        }
      }, intervalTime);
    }
  }

  

  private clearProgressInterval() {
    clearInterval(this.progressInterval);
    this.progressInterval = null;
    
  }

  startVideo() {

    // Reset countdown and progress values
    this.countdown = 5;
    this.progressValue = 100;

    //this.clearProgressInterval(); // Clear any existing interval



    this.startProgressInterval();

    this.videoUrl = "http://127.0.0.1:5000/video_feed";
    this.showVideo = true;
    this.fadeInOutState = "in";
    this.videoComponentActive = true; 
    
    
  }

  
  

  closeStream() {
    this.showVideo = false;
    console.log("reached here");
    this.videoUrl = "invalid"
    console.log(this.videoUrl);
    this.clearProgressInterval();
    this.cdRef.detectChanges();
  }

  onHistory() {
    this.router.navigate(["/history"]);
  }

  onLogout() {
    this.router.navigate(["/"]);
  }
}

And this is my component.ts file

I have a backend that uses flask running a facial recognition model to capture emotions, basically when the user clicks the button a pop up is created the facial recognition model gets called and a live video feed is shown and a small timer starts and then after the timer ends the pop up and the video feed close but the api continues to get called and therefore my webcam stays on and everything resets when i refresh the page. How do I stop the api from getting called after the timer ends?

I need help adding a class to a div when it has an active scroll. This is a list that changes depending on the user – sometimes there are so few things there that the scroll does not appear, but in some situations the scroll does.

I found a script, but it involves adding a class when the user reaches a certain point in the box (setting it to 0 is not what I’m looking for, because the user has to hover over the box first anyway), and I need a script that works regardless of this. Is something like this possible?

I have the same exact google cloud function that I’m deploying to 2 different regions; for my European customers, none of their data can leave their country. Is there a way that I can share the code within my cloud function so that I can access the same code in the 2 different regions while having the 2 distinct endpoints?

   functions.http('helloHttp', async (req, res) => {
           //all the code I want to share is here!
   })

<div class="scrollable">
  <div class="scroll-content">
    <!-- content here -->
  </div>
  <div class="custom-scrollbar">
    <div class="scroll-thumb"></div>
  </div>
</div>

As custom-scrollbar are work as scroll bar track and scroll-thumb like a thumb of scroll ant one can help me please aaaaaaaa

so i made a script to change the css file linked depending on time of year. however the load time is too slow when changing page and refeshing, causing my page to load without css for a few seconds. Any thoughts on how to do this? i tried defer and async and changing the listed order of the linked files but it doesnt either, i have a feeling my js code is too slow and changing the href attribute may be an inefficient way for it to work. Any help would be most appreciated

aformentioned html file

<!DOCTYPE html>
<html>
  <head>
  
      <script type="module" src="localimports/scripts/script_for_site_themes.js" type="text/javascript" ></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Index</title>
    <link rel="stylesheet" href="localimports/css/style.css">
    <script src="localimports/navbars/header.js" type="text/javascript" defer></script>
    <script src="localimports/navbars/footer.js" type="text/javascript" defer></script>
        <link id="sitebirthday" rel="stylesheet" href="">
    <link id="october" rel="stylesheet" href="">
    <link id="christmas" rel="stylesheet" href="">
    <link id="newyear" rel="stylesheet" href="">
    <link id="normal" rel="stylesheet" href="">


    
    

  </head>
  <body>
  

    <header-component>
    </header-component>
    <main>

below is the linked js file named script_for_site_themes.js that i call on to get my css file

 setInterval(function () {
        var date = new Date();
        var isodate = new Date().toISOString()

        if (date.getMonth()  === 11 && date.getDate()  === 12) {

                                    document.getElementById("sitebirthday").href="https://www.google.co.uk";



        }


        if (date.getDate()  === 9 ) {

                                    document.getElementById("october").href="https://www.google.co.uk";

        }

         if (date.getMonth()  === 11 ) {

                                    document.getElementById("christmas").href="https://www.google.co.uk";



        }


         if (date.getMonth()  === 0 ) {

                                    document.getElementById("newyear").href="https://www.google.co.uk";

        }
        
        
        
         else {

                                    document.getElementById("normal").href="../localimports/css/templateofcssthemes.css";

        }


        








    }, 1000)
    
    

</main>  <br>

<footer-component></footer-component>

I’m running the same code on Firefox 125 and Chromium 124.

The code run on Firefox produces a Blob that is an encoded MP3 file – after chopping up whatever audio is being played in Firefox while the audio is finalizing encoding.

The Chromium version produces an MP3 that is full of glitches, clipping, and plays back faster.

Here’s a link to a ZIP file containing the result examples https://github.com/guest271314/MP3Recorder/files/14625262/firefox125_chromium124_audioworklet_to_mp3.zip.

Here’s a link to the source code https://github.com/guest271314/MP3Recorder/blob/main/MP3Recorder.js.

In pertinent part:

// https://www.iis.fraunhofer.de/en/ff/amm/consumer-electronics/mp3.html
// https://www.audioblog.iis.fraunhofer.com/mp3-software-patents-licenses
class MP3Recorder {
  constructor(audioTrack) {
    const {
      readable,
      writable
    } = new TransformStream({}, {}, {
      highWaterMark: 65536,
    });
    Object.assign(this, {
      readable,
      writable,
      audioTrack,
    });
    this.writer = this.writable.getWriter();
    this.audioTrack.onended = this.stop.bind(this);

    this.ac = new AudioContext({
      latencyHint: .2,
      sampleRate: 44100,
      numberOfChannels: 2,
    });

    const {
      resolve,
      promise
    } = Promise.withResolvers();
    this.promise = promise;

    this.ac.onstatechange = async (e) => {
      console.log(e.target.state);
    };
    return this.ac.suspend().then(async () => {
      // ...
      const lamejs = await file.text();
      // const {lamejs} = await import(url);
      const processor = `${lamejs}
class AudioWorkletStream extends AudioWorkletProcessor {
  constructor(options) {
    super(options);
    this.mp3encoder = new lamejs.Mp3Encoder(2, 44100, 128);
    this.done = false;
    this.transferred = false;
    this.controller = void 0;
    this.readable = new ReadableStream({
      start: (c) => {
        return this.controller = c;
      }
    });
    this.port.onmessage = (e) => {
      this.done = true;
    }
  }
  write(channels) {
    const [left, right] = channels;
    let leftChannel, rightChannel;
    // https://github.com/zhuker/lamejs/commit/e18447fefc4b581e33a89bd6a51a4fbf1b3e1660
    leftChannel = new Int32Array(left.length);
    rightChannel = new Int32Array(right.length);
    for (let i = 0; i < left.length; i++) {
      leftChannel[i] = left[i] < 0 ? left[i] * 32768 : left[i] * 32767;
      rightChannel[i] = right[i] < 0 ? right[i] * 32768 : right[i] * 32767;
    }
    const mp3buffer = this.mp3encoder.encodeBuffer(leftChannel, rightChannel);
    if (mp3buffer.length > 0) {
      this.controller.enqueue(new Uint8Array(mp3buffer));
    }
  }
  process(inputs, outputs) {
    if (this.done) {
      try {
      this.write(inputs.flat());
      const mp3buffer = this.mp3encoder.flush();
      if (mp3buffer.length > 0) {
        this.controller.enqueue(new Uint8Array(mp3buffer));
        this.controller.close();
        this.port.postMessage(this.readable, [this.readable]);
        this.port.close();
        return false;
      }
      } catch (e) {
        this.port.close();
        return false;
      }
    }
    this.write(inputs.flat());
    return true;
  }
};
registerProcessor(
  "audio-worklet-stream",
  AudioWorkletStream
)`;
      this.worklet = URL.createObjectURL(new Blob([processor], {
        type: "text/javascript",
      }));
      await this.ac.audioWorklet.addModule(this.worklet);
      this.aw = new AudioWorkletNode(this.ac, "audio-worklet-stream", {
        numberOfInputs: 1,
        numberOfOutputs: 2,
        outputChannelCount: [2, 2],
      });
      this.aw.onprocessorerror = (e) => {
        console.error(e);
        console.trace();
      };
      this.aw.port.onmessage = async (e) => {
        console.log(e.data);
        if (e.data instanceof ReadableStream) {
          const blob = new Blob([await new Response(e.data).arrayBuffer()], {
            type: "audio/mp3",
          });
          resolve(blob);
          console.log(blob);
          this.audioTrack.stop();
          this.msasn.disconnect();
          this.aw.disconnect();
          this.aw.port.close();
          this.aw.port.onmessage = null;
          await this.ac.close();
        }
      };
      this.msasn = new MediaStreamAudioSourceNode(this.ac, {
        mediaStream: new MediaStream([this.audioTrack]),
      })
      this.msasn.connect(this.aw);
      return this;
    }).catch(e => console.log(e));
  }
  async start() {
    return this.ac.resume().then(() => this.audioTrack).catch(e => console.log(e));
  }
  async stop(e) {
    this.aw.port.postMessage(null);
    return this.promise;
  }
}

Here’s how I use the code, with setTimeout() included for how to reproduce what I’m getting here for tests:

var stream = await navigator.mediaDevices.getUserMedia({
  audio: {
    channelCount: 2,
    noiseSuppression: false,
    autoGainControl: false,
    echoCancellation: false,
  }
});
var [audioTrack] = stream.getAudioTracks();
var recorder = await new MP3Recorder(audioTrack);
var start = await recorder.start();
setTimeout(() => {
  recorder.stop().then((blob) => console.log(URL.createObjectURL(blob)))
  .catch(console.error);
}, 10000);

What’s the issue on Chrome/Chromium?

I have this exercise task where you are required to gather data on a specific path, such as a walking route. You need to follow a
path of characters and collect letters:

● Start at the character >

● Follow the path

● Collect letters

● Stop when you reach the character s

Input: A matrix representing the grid, it can be constant
Output:

• Path
• Letters

This is the example

This is the Output:

• Path @—A—+|C|+—+|+-B-s
• Letters ACB

This is for the assignment

These are the rules

• The only valid characters are all uppercase letters (A-Z)
• Turns can be letters or +

https://codeshare.io/NKoe6V

The output is >—A-@-+s, after the first row it goes straight to the end to “s”

I’m working with the react-native-draggable component.

return (
    <View >
        <Draggable x={75} y={100} renderSize={56} renderColor='black' renderText='A' isCircle shouldReverse onShortPressRelease={()=>alert('touched!!')}/> 
        <Draggable x={200} y={300} renderColor='red' renderText='B'/>
        <Draggable/>
    <Draggable x={50} y={50}>
        <YourComponent/>
    </Draggable>
    </View>
);

By setting the shouldReverse prop to true, the draggable item smoothly returns to its original position.

However, I can’t seem to dynamically update the “original position” of the draggable item by updating the position.x and position.y values, as in the following code:

    <View style={styles.answerContainer}>
        {answerParts.map((item, index) => (
            <Draggable
                key={item.index}
                x={item.position.x}
                y={item.position.y}
                disabled={item.placed}
                shouldReverse={!item.placed}
                onDragRelease={(event) => onReleaseItem(item, event)}
            >
                <View style={styles.draggableItem}>
                    <Text style={styles.draggableText}>{item.text}</Text>
                </View>
            </Draggable>
        ))}
    </View>

Any thoughts on how I can properly change the original location of a draggable React Native component?

Thanks!
Anson

I am trying to open an epub file in my chrome extension page (‘dist/epub-viewer.html’) but chrome keeps trying to download the epub instead. I am using manifest v3.

function isEpubUrl(url) {
  return url.toLowerCase().endsWith('.epub');
}

function isEpubViewerUrl(url) {
  const viewerUrl = chrome.runtime.getURL('dist/epub-viewer.html');
  return url.startsWith(viewerUrl);
}

function openEpubInViewer(tabId, epubUrl) {
  const viewerUrl = chrome.runtime.getURL('dist/epub-viewer.html') + '?file=' + encodeURIComponent(epubUrl);
  chrome.tabs.update(tabId, { url: viewerUrl });
}

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.url && isEpubUrl(changeInfo.url) && !isEpubViewerUrl(tab.url)) {
    openEpubInViewer(tabId, changeInfo.url);
  }
});

Is there any way to do this without having to create an additional page where the user can open their EPUB? I have similar code for PDFs which works fine, but for EPUBs chrome keeps trying to download them.

I have a couple of HTML elements on my page that were created dynamically, so my Delphi form doesn’t know about them (as far as I’m aware), but all of them have a class called “TestingClass”.

I’m able to loop through all of them using JavaScript code within Delphi from my form such as:

procedure TfrmMain.Testing(Sender: TObject);
begin
  asm
    const elements = document.querySelectorAll(".TestingClass");
    elements.forEach((element) => {
        console.log(element);
        // Access each element using the "element" parameter
    });
  end;
end;

And that works, but ideally, I’d like to eliminate the JavaScript code and use only Delphi. What would be the equivalent Delphi code to get all elements on my page with that class and then loop through it?

Note that all of these HTML elements are created dynamically using JavaScript. So they don’t have the form or application as the owner, but they’re all definitely visible on the page and in the DOM.