Forem: Damandeep Singh

Add a Vertical Player to Your Website

Damandeep Singh — Sun, 28 Dec 2025 11:46:14 +0000

This post describes how to add a vertical player to your website to deliver a smooth, vertically scrollable experience similar to youtube reels and youtube-shorts.

Vertical Player is an immersive, scroll-focused video player built on top of Video.js and powered by Next.js. It’s designed specifically for vertical video playback (think TikTok, Reels, and similar mobile-first experiences), providing a seamless and responsive viewing experience that fits modern vertical content formats.

This player:

Utilizes Video.js, a robust open-source HTML5 video player framework that supports extensive customization and plugins.
Offers an interface optimized for vertical scrolling and mobile interaction, making it ideal for apps or sites featuring portrait video feeds.
Is built with Next.js, offering a modern React-based architecture for easy integration and extensibility.

📘 Steps to integrate the player:

1. Installation:

Intall the npm package (https://www.npmjs.com/package/vertical-player).

npm i vertical-player

2. Usage:

Attributes:

Option	Type	Required	Description
`data`	`object[]`	✅ Yes	Array of objects containing asset URL and metadata: `id`, `title`, `description`
`handleLike`	`fn()`	❌ No	Callback function triggered when the Like button is clicked
`handleShare`	`fn()`	❌ No	Callback function triggered when the Share button is clicked

data[] : Array of objects containing url of the asset and metadata: id, title, description.

url: mp4/hls url of the asset.
id: unique id for internal handling of the player.
title: text which is displayed at the bottom of each player.
tag: category which is displayer at the bottom of each player.

handleLike(): Callback function which gets fired when like button is clicked on a player.

Sample response:

{
    "status": true,
    "name": "like",
    "id": 1
}

{
    "status": false,
    "name": "unlike",
    "id": 1
}

handleShare() : Callback function which gets fired when share button is clicked on a player.

Sample response:

{
    "name": "share",
    "id": 1
}

⭐️ Check the react component below for complete usage:

"use client"
import {VerticalPlayer} from 'vertical-player/esm/index.es.js';


export default function Home() {
  const handleLike=(e)=>{
    console.log(e); 
  }

  const handleShare=(e)=>{
    console.log(e);
  }

  const DATA: any = [
        {
            id: 1,
            tag: "BRAND",
            asset_url: 'https://www.abc.com/~dnn/clips/RW20seconds_2.mp4',
            description: 'This is a simple description which describes the video'
        },
        {
            id: 2,
            tag: "BRAND",
            asset_url: 'https://www.abc.com/~dnn/clips/RW20seconds_2.mp4',
            description: 'This is a simple description which describes the video'
        },
        {
            id: 3,
            tag: "BRAND",
            asset_url: 'https://www.abc.com/~dnn/clips/RW20seconds_2.mp4',
            description: 'This is a simple description which describes the video'
        },
        {
            id: 4,
            tag: "BRAND",
            asset_url: 'https://www.abc.com/~dnn/clips/RW20seconds_2.mp4',
            description: 'This is a simple description which describes the video'
        },
        {
            id: 5,
            tag: "BRAND",
            asset_url: 'https://www.abc.com/~dnn/clips/RW20seconds_2.mp4',
            description: 'This is a simple description which describes the video'
        },

    ];
  return (
    <VerticalPlayer data={DATA} handleLike={handleLike} handleShare={handleShare}  />
  );
}

3. Demo:

https://github.com/user-attachments/assets/44fc682d-dea6-4013-8daf-113058a68cf6

More information :-
📂 GitHub: https://github.com/dds05/vertical-player
📦 NPM : https://www.npmjs.com/package/vertical-player

Like this? Don’t forget to leave a ⭐️ on GitHub!

AWS MediaTailor : Server Side Ad Insertion (SSAI)

Damandeep Singh — Wed, 17 Sep 2025 18:55:44 +0000

What is SSAI?

Server-Side Ad Insertion (SSAI) is a technology where ads are stitched directly into the video stream on the server before it reaches the viewer’s device. With SSAI, the video player receives a single, continuous stream that includes both the main content and the ads, making the transitions between them seamless.

Why ?

Seamless playback experience: No buffering or jarring transitions between content and ads.
Bypasses ad blockers: Since ads are part of the main stream, it’s harder for ad blockers to filter them out.
Consistent performance across devices: Works smoothly on various platforms and devices without heavy client-side logic.
Better measurement & analytics: Offers precise tracking through server-side and client-side beaconing.
Scalability: Easier to manage ad workflows on the server rather than on individual client apps.

This article covers how to integrate MediaTailor SSAI with your video player and covers all the frontend aspects.

For this, I will be using example of video.js.

A glimpse about video.js :-
Video.js is an open source javascript based video player which is used by approx 800,000 websites.

✨ Bonus: Includes a custom plugin that facilitates ad markers, an ad counter with a countdown timer, and beaconing.

For more insights into backend integration, check out this article, which dives deep into the server aspects of SSAI."

📘 Steps to Integrate SSAI Workflow

Here are the steps required to set up AWS MediaTailor SSAI with your video player. :-

1. Session URL formation :

Now the first thing is session url which is basically the post api call which is initiated from the player to the stitching service (MediaTailor) which passes it further to the ads server (Eg. FreeWheel).

You typically generate the session URL by replacing certain parts of the manifest URL:

Replace ‘/dash/’ with ‘/session/’ for MPD assets (DASH).
Replace ‘/master/’ with ‘/session/’ for HLS assets.

Example final session URL:-

https://domain.example..com/v1/session/aesdnsjdsk/Renditions_asset/20250805/1754403862031_sample_HD_TVE_SAMPLE_ASSET_07172025_7830k_mp4_CUSTOM_CODEC_TS_DRM_DASH_DRM/dash/stream.mpd

You can also check with your backend team on how to create the session link as it can be done differently on the basis of CDN and other mapping. There is also the possibility of not doing this on the player all together and having it done by the server using the video id and then the server is responsible to just send you manifest and tracking url.

2. POST Request to Get Manifest and Tracking URL

Once you have the session url , you now need to send the url as a POST request with the necessary key:value pairs required by Ad decision server.

Note that user-agent is an essential header which needs to be passed in order to ensure that the ad decision server stitches the ad seamlessly.

For a web browser, we don’t need to explicitly send as it is managed by the browser.

3. Parsing the Response.

Once you post the session url , you will get the following response :-

Example response:

{
manifestUrl:"/v1/dash/a2769ff6f508fb0f68aca8782209ab59ae7a5db0/sample/Renditions/20250805/1754403862031_sample_mp4_CUSTOM_CODEC_TS_DRM_DASH_DRM/dash/stream.mpd?aws.sessionId=dz2d6359-4302-4fb2-a3c4-7cefa9468d42",
trackingUrl:"/v1/tracking/a2769ff6f508fb5f68aca8782209ab59ae7a5db0/samoke/eb7d6e59-4302-4fb2-a3c4-7cefa9468d32"
}

In the response, you will get the paths of tracking url and manifest url.

To construct the full URLs, prepend the same domain you used for the POST request.

Tracking URL → Contains ad details and beacons
Manifest URL → Contains stitched content with ads

Pass the manifestURL in videojs to run the stitched content.

Example: Play the stitched asset.

player.src( {src: ‘manifestUrl’ , type :  ‘application/x-mpegURL“} )

Once set, the player will seamlessly play content + ads as a single stream.

This will allow the stitched asset to play seamlessly.

Now, let's move forward with showing the ad-markers on the seekbar and managing advertisement beacons.

Tracking URL is the source of truth for managing anything related to the ads in case of aws media tailor.

4. Working with Tracking URL

Ensure that the updatedManifest URL is loaded into the player before calling the tracking URL.
This is an important step because if you call the tracking URL first without loading the updated manifest url with sessionId, you will end up getting an empty response from the stitching service (aws-mediatailor).

Once the asset is loaded, you can simply call the tracking url as shown below:

Eg:

player.one(‘loadeddata’, async()=>{
    // initiate get request for tracking url.
    getTrackingData();
})

async function getTrackingData(){
    const res =  await fetch(trackingUrl);
    const data = await res.json();
}

Initiate a get request to retrieve all the advertisement related data.

You will get a JSON based response as a result.

The ‘avails’ key is an array of objects which consists of all the ad pods present in the stitched asset.

Now here, the response might not include ads in all the pods and you can get an empty array for some cases.

You can now mark the ad pods on the video.js player's seekbar based on this data.

Since each ad pod has the ‘startTimeInSeconds‘ key , we can mark that ad pod on the seekbar.

You can also use this plugin which basically does the job with many other features as well.

VideoJS Player with Ad Markers and Ad counter :-

5. Beaconing (Client-Side Tracking)

Now here comes the client side beaconing.

In AWS MediaTailor, beacons are small tracking signals sent to an ad server to report on viewer ad engagement, indicating milestones like the start or completion of an ad. AWS MediaTailor supports both server-side (where MediaTailor sends the beacons) and client-side (where the player sends the beacons) tracking methods to provide granular metrics for ad performance and impression measurement.

Lets discuss about the client side beacon handling :-

The ad pod contains an ‘ads’ key which is an array of objects.

Inside each object, we have the ‘trackingEvents’ key which consists of all the beacons related to that particular ad.

Now , each trackingEvent has the ‘startTimeInSeconds’ which denotes when this beacon event should be triggered. It also has the ‘beaconUrls’ key which consists of the url for that beacon.

For a particular advertisement, we are supposed to send a get request exactly as per the 'startTimeInSeconds'.

Now, in video.js or any other web based player we can make use of player.on(‘timeupdate’,cb) event in order to facilitate this logic.

⚠️Caution: Since timeupdate fires 4-5 times/second. It is important to handle the logic carefully.

You can also this plugin. It handles the beacon logic as well as it provides other basic features for ssai integration.

Final Thoughts

That’s it!
You now have a fully functional AWS MediaTailor SSAI integration with:

Session URL creation
Manifest loading
Tracking data handling
Ad markers on the seek bar
Client-side beacon tracking

You can also read the official documentation of AWS Mediatailor for more insights.

Videojs Theme Kit — Effortless Player Control Customization

Damandeep Singh — Wed, 13 Aug 2025 16:31:34 +0000

About Video.js : https://videojs.com/

While Video.js comes with a default skin, it offers very limited customization out of the box.

If you want to change the look by switching to a modern design, adjusting colors to match your brand, or quickly trying out different styles, then you often have to:

Write custom CSS overrides
Deal with theme conflicts
Manually maintain style changes across updates

Video.js Theme Kit removes all that hassle.

✨ Key Features :

🎯 4 modern, ready to use themes: Slate, Spaced, Sleek, and Zen.
🎨 Infinite color customization to perfectly match your brand aesthetics.
⚡ Simple installation and setup for a smooth developer experience.

How to use it?

It is pretty simple.

 npm install videojs-theme-kit

 player.on('ready',()=>{
   player.theme({
     skin: SKIN_NAME,
     color: 'HEXCODE_OF_THE_COLOR'  //optional
   })
 })

More information :-

🔗 Demo: https://videojs-theme-kit-site.vercel.app/
📂 GitHub: https://github.com/dds05/videojs-theme-kit
📦 NPM : https://www.npmjs.com/package/videojs-theme-kit
ℹ️ About Video.js : https://videojs.com/

Is innerHTML Dangerous? Myth vs Reality

Damandeep Singh — Tue, 01 Jul 2025 13:30:00 +0000

innerHTML has been around since the early days of the web.
It’s used in millions of websites to manipulate the DOM efficiently.

✅ Advantages of innerHTML:-

Simplicity and Convenience : It is very easy to use and perfect for quickly injecting or replacing a block of HTML.
Performance : Updating large chunks of HTML in one go is often faster than building DOM nodes individually. Especially useful for rendering static templates or HTML responses from the server.
Supports Complete HTML Features : Capable of rendering: nested elements , inline styles , SVGs etc.

⛔️ When innerHTML Becomes Dangerous ?

Security Risk (XSS) : It can easily lead to Cross-Site Scripting (XSS) vulnerabilities if used with user-controlled data. It can easily be exploited to inject malicious scripts if you're inserting untrusted content.

Example :-

const userInput = document.getElementById('comment-box').value;
element.innerHTML = userInput;  // If userInput contains <script>alert('XSS')</script>, it will execute.

2. DOM Rebuild Overhead : Using innerHTML repeatedly (like in a timer, clock, or live feed) forces the browser to:

Remove all existing child elements
Parse the new HTML string
Rebuild and insert everything again

This constant process is inefficient for real-time updates. It leads to unnecessary reflows and repaints, which can affect performance.

🔒 Recommendation:

✅ Use innerHTML only when you control 100% of the content being inserted.

✅ If the content comes from a user (like a form or a comment), use textContent to show it as plain text, or sanitize it with a tool like DOMPurify before adding it to the page.

// Safer option:
const safeHTML = DOMPurify.sanitize(userInput);
element.innerHTML = safeHTML;

𐄷 Verdict:-

innerHTML is safe when the content is completely trusted — i.e., not user controlled. It remains a useful part of the web platform due to its simplicity, performance benefits, and legacy support.

As developers, it’s our responsibility to use it wisely. We should avoid it entirely when working with untrusted or dynamic input, to prevent serious vulnerabilities like Cross-Site Scripting (XSS).

Let me know what you think about this.

Best Practices for Using Dynamic SVGs in Your Frontend

Damandeep Singh — Sun, 29 Jun 2025 18:54:57 +0000

🔄 How often have you needed to update icons dynamically based on user interaction?

Whether it's toggling a button state, switching themes, or updating a UI element, dynamically updating icons is a common need in frontend development.

🚫 Naive Approach :-

const button = document.getElementById('play-toggle');

const onPlay = () => {
  button.innerHTML = `<!-- SVG markup for play icon -->`;
};

const onPause = () => {
  button.innerHTML = `<!-- SVG markup for pause icon -->`;
};

This method uses innerHTML to inject SVGs on each toggle. While this works, it has two major drawbacks:

Security Risk: innerHTML is prone to XSS (Cross-Site Scripting) attacks and is generally discouraged for dynamic updates.
Performance Overhead: Even if replaced with appendChild() or similar safer methods, this approach re-renders the entire SVG each time, leading to unnecessary DOM updates.

✅ Efficient & Safe Approach :-

A cleaner, more efficient, and secure solution is to define your SVGs once using <symbol> and reference them dynamically using <use>.

Checkout the code below:-

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    <defs>
      <symbol id="vjs-icon-play" viewBox="0 0 512 512">
        <path fill="currentColor" d="M108.9 66.5v353L403 242.1zm25.3 49.1 212.3 126.7-212.3 128z"></path>
      </symbol>
      <symbol id="vjs-icon-pause" viewBox="0 0 512 512">
        <path fill="currentColor" d="M98.2 422.5h121.6v-359H98.2zm20.4-  338.7h80.8v318.4h-80.8zm173.6-20.3v359h121.6v-359zm101.2 338.7h-80.8V83.8h80.8z">
        </path>
      </symbol>
    </defs>
</svg>


<!-- Play/Pause Toggle Button -->
<button id="play-toggle">
  <svg id="play-toggle-icon" viewBox="0 0 512 512" width="32" height="32">
    <use href="#vjs-icon-play"></use>
  </svg>
</button>

const icon = document.querySelector('#play-toggle-icon use');

const onPlay = () => {
  icon.setAttribute('href', '#vjs-icon-play');
};

const onPause = () => {
  icon.setAttribute('href', '#vjs-icon-pause');
};

📘 Quick Reference :-

ℹ <defs> : It is an SVG container used to store elements such as <symbol>, <gradient>, <filter>, etc., that are not rendered directly in the SVG output. Instead, these definitions can be referenced later by other SVG elements.

ℹ <symbol> : It is an SVG element used to define reusable graphic content — such as icons, shapes, or patterns — without rendering it immediately.

ℹ <use> : It is an element in SVG which is designed to reference and reuse other SVG elements—especially things like icons, shapes, or graphic elements—without duplicating code.

💡 Why This Approach Is Better?

✅ Security: No innerHTML, hence safer from injection attacks.

✅ Performance: The SVG is only defined once; only the reference (href) changes on interaction.

✅ Maintainability: Centralised icon definitions make it easy to manage and scale.

Let me know what do you think about this?

👨‍💻 What is Request Coalescing?

Damandeep Singh — Thu, 26 Jun 2025 18:42:34 +0000

Recently, I encountered a scenario where multiple API requests were being made from a common function triggered by various initiators. To address this, I discovered the concept of request coalescing.

Request coalescing is a technique for tracking ongoing API requests and sharing the result among all simultaneous requests.

Why is it important in frontend development?

In applications that rely on authentication tokens, it's common for multiple parts of the app to trigger requests around the same time. If the token has expired, these requests might all attempt a token refresh simultaneously.

Request coalescing ensures that only one refresh request is actually made. All subsequent requests receive the result of that shared ongoing promise, avoiding redundant network calls and improving performance.

Check out the code snippet below :-

let refreshTokenPromise = null;

// function to get auth token
const getAuthorizationToken = async () => {
  let token = Cookies.get("token") && JSON.parse(Cookies.get("token"));

  // if token is expired
  if (token && isTokenExpired(token)) {
    if (!refreshTokenPromise) {
      // Initiate a new refresh token request
      refreshTokenPromise = fetchRefreshToken()
        .then((result) => {
          const authToken = result?.authorizationToken;
          const refreshToken = result?.refreshToken;

          if (authToken) {
            Cookies.set("token", authToken);
          }
          if (refreshToken) {
            refreshTokenManager().set(refreshToken);
          }
          return authToken || token;
        })
        .catch((e) => {
          console.error("Error fetching refresh token", e);
          return token;
        })
        .finally(() => {
          // Reset the pending request tracker regardless of success or failure
          refreshTokenPromise = null;
        });
    }
    // Return the promise of the ongoing refresh request
    return refreshTokenPromise;
  } else {
    return token;
  }
};

const isTokenExpired = (token) => {
  let currentTime = new Date().getTime();
  if (token.expiryTime < currentTime) return true;
};

const fetchRefreshToken = async () => {
  // api call to fetch refresh token and return the response
};

So, if you look at the code above, you’ll notice that we’re caching the ongoing promise of the API request. This means that if the function is triggered multiple times simultaneously, it won’t initiate multiple requests—instead, it will return the same in-progress promise to all callers.

Checkout the flow diagram for more clear understanding :-

This effectively ensures that only one API call is made, and the result is shared across all request initiators. Once the promise resolves, all the awaiting calls receive the same response, reducing redundant network requests and improving overall efficiency.

Let me know what you think in the comments !

Singleton with IIFE for state management in JavaScript

Damandeep Singh — Mon, 23 Jun 2025 19:46:19 +0000

Ever needed a centralized configuration manager in your JavaScript app? 🤔

In modern JavaScript apps, managing shared state or configuration often means reaching for heavy tools like Redux, Zustand, or context APIs. But what if you're working on a small utility, a framework-agnostic widget, or just need a simple global config?

This is where the Singleton pattern with an IIFE (Immediately Invoked Function Expression) comes in handy.

It offers a lightweight, zero-dependency way to encapsulate state, avoid global pollution, and keep things clean—all without introducing a full-blown state manager.

🔧 Here's how I use the Singleton + IIFE pattern:

const configManager = (() => {
  let config = {};

  return {
    set(key, value) {
      config[key] = value;
    },
    get(key) {
      return key ? config[key] : config;
    }
  };
})();

// Usage
configManager.set("theme", "dark");
configManager.set("language", "en");

console.log(configManager.get("theme"));   // "dark"
console.log(configManager.get());          
// { theme: "dark", language: "en" }

🛠️ Practical Uses of Singleton IIFE :-

1️⃣ Small Projects or Utilities

When you're building a small app or a quick utility, full-blown state management is often unnecessary.

Lightweight, zero-dependency
Simple centralized storage for shared data or config

2️⃣ Global Configuration / Settings

Perfect for app-wide settings that don’t require reactivity:

🌐 API_BASE_URL, locale, featureToggles
🎨 Theme settings: dark, light
🌍 Language preferences: en, fr

Just a simple, centralized store to read/write values—no state management library needed.

3️⃣ Vanilla JS or Non-Framework Environments

If you're working outside of modern UI frameworks like React or Vue (e.g., in a widget or a JavaScript library), this approach works great.

No React/Redux overhead
Keeps your footprint minimal and portable

4️⃣ Encapsulation + Immutability

Using a Singleton with an IIFE gives you:

🔒 Private internal state
🧪 Access only via controlled get/set methods
🚫 Prevents accidental mutations

This is especially useful when you want to enforce strict, controlled state updates.

If you found this helpful, consider dropping a ❤️ or sharing with a fellow dev!