JSFiddle - React, Tailwind, and code Playground

by romanych

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Key-values passing to video demo</h1>
    <div id="player"></div>


    <script src="https://content.jwplatform.com/libraries/QE39r56O.js"></script>

    <!-- BEGIN: DEMO DATA. DO NOT COPY -->
    <script>
        window.localStorage.apr_tdc =
            '{"at":1596215668872,"exp":1598807668872,"src":"1e6394cc79c5726d","d":{"ap_b":["1004"],"ap_c":["9"],"ap_f":["1501"],"ap_x":["12117","15638"]}}';
    </script>
    <!-- END: DEMO DATA. DO NOT COPY -->


</body>

</html>

JavaScript

"use strict";

function getAudienceProjectTargetingData() {
  var CACHE_KEY = "apr_tdc";
  try {
    var json = window.localStorage.getItem(CACHE_KEY);
    if (json) {
      var cache = JSON.parse(json);
      if (cache.exp > Date.now()) {
        return cache.d;
      } else {
        window.localStorage.removeItem(CACHE_KEY);	
      }
    }
  } catch (err) {
    window.localStorage.removeItem(CACHE_KEY);
  }
  return {};
}

/**
 * Generates GPT key-values string to use in video adunit tag URL. 
 * Calculated using https://support.google.com/admanager/answer/1080597
 * The return value comes raw and requires URI encode before adding to the URL
 * @param {object} ketValuesMap - Key-values map to serialize. Example `{"ap_a": ["1100"], "ap_b": ["9","10"]}`
 * @return {string} Key-values string. Example `ap_a=1100&ap_b=9,10`
 */
function formatGptVideoKeyValues(keyValuesMap) {
  if (!keyValuesMap) {
    return null;
  }
  var parts = [];
  for (var key in keyValuesMap) {
    if (!keyValuesMap.hasOwnProperty(key)) {
      continue;
    }
    var value = keyValuesMap[key];
    if (!Array.isArray(value)) {
      value = [value];
    }
    parts.push(key + "=" + value.join(","));
  }

  return parts.join("&");
}

/**
 * Appends cust_params key to query string with the passed key-value string. 
 * If cust_params is already present in query string, passed value will be appended to the parameter.
 * This function does not work in IE, will return not modified URL
 * @param {string} masterTagUrl - URL to add the parameter to. Expected to be GPT master tag URL
 * @param {string} keyValuesString - Key-values string to add. Example `ap_a=1100&ap_b=9,10`
 * @return {string} - URL with added `cust_params` query string parameter
 */
function appendCustStringParam(masterTagUrl, keyValuesString) {
  if (!(window.URL && window.URLSearchParams)) {
    return url;
  }
  var url = new URL(masterTagUrl);
  var custParams = url.searchParams.get("cust_params");
  if (custParams) {
   ...