Sort YouTube Videos by video duration using JavaScript

Anas Ikhlas — Fri, 21 Jan 2022 15:44:35 +0000

In this article, we are going to learn how we can sort YouTube channel videos by video duration.

We can sort video from low-to-high and high-to-low video duration. EG: 0:10 to 10:00.

To sort YouTube videos, I have created a package and we are going use that package. Package name is sort-youtube-videos.

First of all, we have to install the package:

npm i sort-youtube-videos

OR if you prefer YARN

yarn add sort-youtube-videos

let's import this package

// if you want to use require
const { sortByDuration } = require("sort-youtube-videos");
//OR
// if you are want to use import
import { sortByDuration } fro"sort-youtube-videos";

// more code ...

To sort videos:

const url = "https://www.youtube.com/channel/UC5RRWuMJu7yP1DQwnW_nAvA"; //enter channel url or channel id
const sortBy = "sl"; // options: sl - ls

sortByDuration(url, sortBy).then((res) => console.log(res));

Note sl means short to long and ls means long to short

And this is the response we will get back:

[
  {
    type: "video",
    title: "Ramadan Ki Shan Episode 11 Digitally Presented by Spiced Foods",
    videoId: "dgoBBYbSKUQ",
    author: "Anas and Ammar",
    authorId: "UC5RRWuMJu7yP1DQwnW_nAvA",
    videoThumbnails: [[Object], [Object], [Object], [Object]],
    viewCountText: "15 views",
    viewCount: 15,
    publishedText: "5 months ago",
    durationText: "4:09",
    lengthSeconds: 249,
    liveNow: false,
    premiere: false,
    premium: false,
  },
  {
    type: "video",
    title:
      "Watch latest movies, web series and TV channels for free without any subscription ||Android",
    videoId: "ummVLFK17GI",
    author: "Anas and Ammar",
    authorId: "UC5RRWuMJu7yP1DQwnW_nAvA",
    videoThumbnails: [[Object], [Object], [Object], [Object]],
    viewCountText: "16 views",
    viewCount: 16,
    publishedText: "1 year ago",
    durationText: "4:11",
    lengthSeconds: 251,
    liveNow: false,
    premiere: false,
    premium: false,
  },
  //   ... 109 more items
];

Here's the full code:

const { sortByDuration } = require("sort-youtube-videos");

const url = "https://www.youtube.com/channel/UC5RRWuMJu7yP1DQwnW_nAvA"; //url or channel id
const sortBy = "sl"; // options: sl - ls

sortByDuration(url, sortBy).then((res) => console.log(res));

To sum up
This process of sorting YouTube videos can take some time and this process might not be that efficient. Because we are fetching all videos from a YouTube channel and than a sorting algorithm will sort the videos. But there might be 1000 video's or more videos on the channel.

So, you might ask...
What will be a better solution?
There is no other solution right now.
If YouTube officially provide this feature than it will be more efficient.

That pretty much it. I hope you found this article helpful.
Happy Coding:)

Simple Image Picker with React Native

Anas Ikhlas — Fri, 21 Jan 2022 13:40:50 +0000

In this blog, we are going to create a simple image picker with expo-image-picker.

First of all install expo-image-picker.
By running this command in your terminal:

expo install expo-image-picker

Now import this components inside your app.

import * as ImagePicker from 'expo-image-picker';

We will also use Image component from react-native to display selected Image:

import {  Image } from 'react-native';

Than we will create a function inside our component:

const pickImage = async () => {
   let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

// more code ...

}

To View this image inside our component we will use react state:

const [images,setImages] = React.useState(null);

And than we will update pickImage function:

  const pickImage = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    // New code block
    if (!result.cancelled) { 
      setImage(result.uri);
    }
  };

We can display image like this:

{image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}

To open image picker we will call pickerImage function on Button press:

<Button title="Pick an image from camera roll" onPress={pickImage} />

This is how our app looks like at the end:

import React, { useState, useEffect } from 'react';
import { Button, Image, View, Platform } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function ImagePickerExample() {
  const [image, setImage] = useState(null);

  const pickImage = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    console.log(result);

    if (!result.cancelled) {
      setImage(result.uri);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  );
}

I Hope this article helps you.
Happy coding:)

DEV Community: Anas Ikhlas

Sort YouTube Videos by video duration using JavaScript

Simple Image Picker with React Native