Category: javascript

I have written a automation script which downloads zoom video recordings from zoom to downloads folder in my ec2 ubuntu server and then that video gets uploaded to youtube using youtube api v3. Problem is that my script is working perfectly fine on windows system of my computer but when live on ec2 server the script is only able to download video recording of zoom meeting of 10 seconds only, that too last 10 seconds. I am unable to figure out if what ec2 setting does I need to change so I can download whole video of 2 hours from zoom. Here is my code below :

function GetZoomMeetingData(zoomID,nameofClan,recordIDMetaData,clanNumber) {
    //  zoom meeting link of Zoom ID
    //https://api.zoom.us/v2/meetings/{meetingId}/recordings
    var meetingLink = 'https://api.zoom.us/v2/meetings/'+zoomID+'/recordings';

//  select meeting from admission base   
const zoomMeeting = axios({
    method: 'get',
    url: meetingLink,
    'headers': {
        'Authorization': zoomAuthoToken
    },
    responseType: 'json',
})

zoomMeeting.then(
    function(response) {
        console.log("Download URL ",response.data.recording_files[0].download_url);
        let meetingURL = response.data.recording_files[0].download_url;
        downloadFile(meetingURL, 'downloads',nameofClan,recordIDMetaData,clanNumber);          
    }
);
}

const downloadFile = async (fileUrl, downloadFolder, nameofClan , recordIDMetaData,clanNumber) => {
  // Get the file name
  const todayDate = new Date();
  let YesterdayDate = new Date(todayDate);

  YesterdayDate.setDate(YesterdayDate.getDate() - 1);
  YesterdayDate = YesterdayDate.toDateString();
  console.log(YesterdayDate);
  let clanVideoName = YesterdayDate + '' + nameofClan;
  const Name = YesterdayDate+'_'+nameofClan+'.mp4';
  const fileName = Name;


  const localFilePath = path.resolve(__dirname, downloadFolder, fileName);
  try {
    const response = await axios({
      method: 'GET',
      url: fileUrl,
      responseType: 'stream',
    });

    const w = response.data.pipe(fs.createWriteStream(localFilePath));
    w.on('finish', () => {
      uploadONYoutubeNow = true;
      console.log('Successfully downloaded file!');
      //this function is called to upload file for zoom on youtube
      youtubeUpload(fileName,clanVideoName,recordIDMetaData,clanNumber);
    });
  } catch (err) {
    throw new Error(err);
  }
};

I deployed a PERN stack to Heroku and it is working fine if I am just navigating by clicking the components, but when I refresh the page e.g. “https://birdex.herokuapp.com/species/Red-crested%20turaco”, I no longer see the page content, just the API information.

This is the url for my deployed app: https://birdex.herokuapp.com/

I understand that I may have the same endpoints in my react router component as well as the in the server but I have tried adding “/api/{endpoints}” for every api request in my server side and this instead result in 304 error. I have to delete the “/api” in order for it to work.

How can I solve this? Thanks!

server.js

app.get("/species/:name", async (req, res) => {
  try {
    const { name } = req.params;
    const familyId = await pool.query(advance_query, [name]);

    res.json(familyId.rows);
  } catch (err) { 
    console.log(err.message);
  }
});

... 

if (process.env.NODE_ENV === "production") {
  //server static content
  //npm run build
  app.use(express.static(path.join(__dirname, "client/build")));

  app.get("/*", (req, res) => {
    res.sendFile(path.join(__dirname, "client/build/index.html"));
  });
}

app.listen(PORT, () => {
  console.log(`server has started on port ${PORT}`);
});

index.js (client)

const [family, setFamily] = useState("");

  useEffect(() => {
    const getFamily = async () => {
      try {
        const response = await fetch(`/species/${match.params.name}`);
        const jsonData = await response.json();
        setFamily(jsonData[0]);
      } catch (err) {
        console.log(err);
      }
    };
    getFamily();
    setNewDescription(family.speciesdesc);
    setNewImg(family.speciesimg);
  }, [match.params.name]);

App.js (contains all the routes)

function App() {
  return (
    <Router history={customHistory}>
      <Switch>

        <Route exact path='/'>
          <HomePage/>
        </Route>

        {/* Only when u use this format component={} then the params can be pass down */}
        <Route exact path ='/species/:name' component={SingleSpeciesPage}/>
        
        <Route exact path ='/birds/:name/:birdsid' component={SingleBird}/>

        <Route exact path = '/birds/:birdName/:birdsid/:species_name/entries' component={EntriesPage}/>
      </Switch>
    </Router>
  );
}

this is my javascript which works for single input fields but I want it to work for multiple input.

here if I try to insert value for input class=adv more than fixed input value of class=full it won’t allow

var $full = $('[class=full]');
var $adv = $('[class=adv]');

$adv.on('keyup keydown', function(e) {
  var fullPay = parseInt($full.val(), 10);
  var advPay = parseInt($adv.val(), 10); //tell the parser it is base 10

  if (advPay > fullPay &&
    e.keyCode !== 46 // keycode for delete
    &&
    e.keyCode !== 8 // keycode for backspace
  ) {
    e.preventDefault();
    $adv.val('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="full" class="full" value="5">
<input type="number" name="adv" class="adv" />

server.js


app.get('/', async (req, res, next) => {
    try {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        const data = await fs.readFile('../index.html')
        res.write('Hello nodejs');
        res.end(data);
        next();
    }
    catch (err) {
        console.error(err);
    }
});

app.post('/upload', upload.single('file'), async (req, res, next) => {
    try {
        res.send('work');   <-- not working
    }
});

i’m making image upload server. and i success. i can upload image into particular directory that i want.

problem is, i want to see the phrase ‘success’ using res.end()(or res.send, etc). but web page was not change!

enter image description here

correctly, web got the response. but i don’t know how to show this response on page.

please teach me.

So in the interface validationRegistry, the bracket means the index property but when does the [propName]: ['required'] mean in the function?

interface ValidatorConfig {
  [property: string]: {
    [validatableProp: string]: string[]; // ['required', 'positive']
  };
}

const registeredValidators: ValidatorConfig = {};

function Required(target: any, propName: string) {
  registeredValidators[target.constructor.name] = {
    ...registeredValidators[target.constructor.name],
    [propName]: ['required']
  };
}

function PositiveNumber(target: any, propName: string) {
  registeredValidators[target.constructor.name] = {
    ...registeredValidators[target.constructor.name],
    [propName]: ['positive']
  };
}

I’m a person who comes from algorithm and data structures background (in c++, c, Python, Java and etc.) and my only experience in frontend is Processing and p5.js. How browsers integrate html, css and js?
Do Javascript scripts generate a new .html file as page at certain framerate? How does it really work inside the browser? Or do most popular libraries like Angular make “syscalls” to the web browser to generate content?

Does using libraries like Angular etc. make generating new html “frame” documents somehow automated for dynamic pages?

I mean apart from all Javascript operations isn’t the final displayed content a html file in the end?

I am trying to extract data from a webpage which requires login.
The following code with

URLfetchapp.fetch(x).getcontentText() 

returns the login page, however I want to get the data after login security page. Code to get data from the page is :

function getPTtrack(linksArray){
  linksArray = `https://www.blogger.com/about/`;
  var ptTracknames = [];
  for(var sear in linksArray){
       var optoutlink= linksArray[sear].toString().search("Publish your passion");
   if(optoutlink!=-1){
  var x = linksArray[sear].replace(">.","").replace("<","").replace(">","").toString();
  var page = UrlFetchApp.fetch(x).getContentText(); 
  var number = page.match(/<b>(.*)</b>/)[1];
  Logger.log(number);
  ptTracknames.push(number);
  }
  }
  console.log(ptTracknames);
  return ptTracknames;
}

But when I run the code to get the data after login to the page. I didn’t get the data from next page instead I get the login page html code in console. Can anyone please suggest what code should I use

Good Evening!

The goal I’m trying to achieve is restoring the Hex formatting of the following sample data:

var data = '5d00008000950100000000000000371849fdfa623b3d13f846a44f70a68ede2cfd13c5f30dd1234c408f72f4fdd8489a1fc141c08e1028d2e107cb914faa93707c62ca278543df4958f9d2c116c9bddd513376e085531fa90d71a35b1719833c7e0ba41751e8f7cd29972cf4cecab05e792767632cdaf7046d77aa2c3df987b26f1a229b6b1439ad9be92f2943de795e18223e8efd0fcff663ca0497d82623c5a695c93ff27db50c935c74ab09604520296fb300d2e984b26a9f377615df2a50b520446285ed4d6a1ab0638a48fddc9410c3d636f719c7ca7559d5b85d2bea0c6e553ed8cf31d693105604a1e05fa3378764132899074c856d1986305faf3a2bc744a3db3e93319c70b3694c4fb266159080d4e5e09113a333bf831f9b1d373fd7dced09a5e351cdfefa6048d4';

The correct format is as follows (Pictures due to formatting issues):

Current Code:

data.match(/.{1,2}/g).join(' ').match(/.{48}/g).join('n');

The rules are every 2 characters are joined with a space, and every 48 characters with a new line.

The current issue with my implementation is that the last line (Starting at d7 and ending at d4) is completely lost since it doesnt match the RegEx statement of 48 characters (its a few short). Is this possible to do in a RegEx statement, or am I over my head?

When I open many tabs with the same domain, the page can’t be displayed but keeps loading forever. I use nuxtjs. How to handle this situation, please. I have encountered this situation on many projects when I work with nuxt and don’t know how to handle it. please help me

I have a website with pages for users and visitors. I Show intercom to visitors using the installation script from intercom documentation
installation script for visitors

Intercom for visitor is showed during signup pages, then when a visitor is registered is redirected to user pages and i switch to the script for users using ‘shutdown’ to show intercom for users.

window.intercom.shutdown()

Then i restart intercom with ‘boot’

window.intercomSettings = {
  app_id: APP_ID,
  api_base: 'https://api-iam.intercom.io',
}
window.Intercom('boot', {
  email,
  name,
  stack: 'b2b',
  user_id: `b2b-${id}`,
})

Intercom chat for visitors disapear but user chat don’t show.
Which is the best way to switch from visitor to user?

I’m trying to open the dropdown menu using Javascript. The “Ask For More Time” button is supposed to open the dropdown menu by using focus() and select() javascript code but it’s not working for the dropdown menu. What JS code do you use to open the dropdown menu?

HTML:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
<form>
<input list="Ask" name="Ask">
  <datalist id="Ask" class="dropdown-menu dropdown-menu-right">
    <option value="One More Minute">
    <option value="Send Request">
    <option value="Enter Screen Time Passcode">
    <option value="Cancel">
  </datalist>
     <button type="submit" id="submit">Send</button>
  <input type="hidden" name="_next" value="https://classroom.google.com/u/0/h">
</form>
     <button onclick=oncl() class="button button5">Ask For More Time</button>
    </div>
  </body>
</html>

Javascript:

function oncl() {
  const datalist = document.getElementById('Ask');
  datalist.focus();
  datalist.select();
}

I’m trying this and receive all records. I only want to return the ones that match bundle.inputData.name

let options = {
  url: bundle.inputData.url,
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-ACCESS-TOKEN': bundle.authData.access_token
  },
  params: {
    'name': bundle.inputData.name,
    'access_token': bundle.authData.access_token
  }
}

return z.request(options)
  .then((response) => {
    response.throwForStatus();
    const results = response.json;

    return results;
  });

I’m new to data structures and was thinking if this code could be simplifided. Maybe a hashmap?

for(let j = 0; j < _info.posts.length; j++) {
        for(let i = 0; i < all_tags.length; i++) {
            if(_info.posts[j].tags.includes(all_tags[i])) {
                let info = {
                    author: _info.posts[j].author,
                    authorId: _info.posts[j].authorId,
                    id: _info.posts[j].id,
                    likes: _info.posts[j].likes,
                    popularity: _info.posts[j].popularity,
                    reads: _info.posts[j].reads,
                    tags: _info.posts[j].tags
                }

                _posts.posts.push(info);
                global_posts.posts.push(info);
            }
        }                    
    } 

Get user input using prompt(“Enter your age:”). If user is 18 or older , give feedback:’You are old enough to drive’ but if not 18 give another feedback stating to wait for the number of years he needs to turn 18.

I am learning React and I have this short-circuit evaluation here:

  <button onClick={() => {
      index + 1 <= length && setSemiData(data[index + 1]);
      index + 1 <= length && setIndex(index + 1);
    }}
  >next</button>

Do I have to repeat the same ‘index + 1 <= length’ for both of them. Isn’t there some ‘better’ way to do it without repeating the same condition twice or multiple times?

Something like this code below:

    <button onClick={() => {
      index + 1 <= length && (setSemiData(data[index + 1]); setIndex(index + 1);)
    }}
    >next</button>

If the Title is misleading, I will change it if there are better suggestions.