No public description

PiperOrigin-RevId: 652830901
googleads · Jul 16, 2024 · 17cbc1d · 17cbc1d
1 parent a99e07c
commit 17cbc1d
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 47 deletions.
diff --git a/podserving/dash_js/index.html b/podserving/dash_js/index.html
@@ -17,14 +17,16 @@ <h1>Pod Serving Sample (DASH streams)</h1>
       <span>Network Code:</span>
       <input id="network-code" type="text">
     </label>
-    <label>
-      <span>Custom Asset Key:</span>
-      <input id="custom-asset-key" type="text">
-    </label>
-    <label>
-      <span>API Key:</span>
-      <input id="api-key" type="text">
-    </label>
+    <div id="live-stream-only-params">
+      <label>
+        <span>Custom Asset Key:</span>
+        <input id="custom-asset-key" type="text">
+      </label>
+      <label>
+        <span>API Key:</span>
+        <input id="api-key" type="text">
+      </label>
+    </div>
     <label>
       <span>Pod request type:</span>
       <div id="request-type">

diff --git a/podserving/dash_js/player.js b/podserving/dash_js/player.js
@@ -5,7 +5,7 @@ let isVodStream;
 let streamId;
 
 const streamUrl = document.getElementById('stream-manifest');
-const netcode = document.getElementById('network-code');
+const networkCode = document.getElementById('network-code');
 const assetkey = document.getElementById('custom-asset-key');
 const apikey = document.getElementById('api-key');
 const liveStreamButton = document.getElementById('live-stream-request');
@@ -22,21 +22,22 @@ function init() {
   logText('Initializing');
 
   // Clear the stream parameters when switching stream types.
-  liveStreamButton.addEventListener('click', clearStreamParameters);
-  vodStreamButton.addEventListener('click', clearStreamParameters);
+  liveStreamButton.addEventListener('click', resetStreamParameters);
+  vodStreamButton.addEventListener('click', resetStreamParameters);
 
   requestButton.onclick = (e) => {
     e.preventDefault();
     if (liveStreamButton.checked) {
-      if (!netcode.value || !assetkey.value || !streamUrl.value) {
+      if (!networkCode.value || !assetkey.value || !streamUrl.value) {
         logText('ERROR: Network Code, Asset Key, and Stream URL are required ' +
                'for livestream requests.');
         setStatus('Error');
         return;
       }
     } else {
-      if (!netcode.value) {
-        logText('ERROR: Network Code is required for VOD stream requests.');
+      if (!networkCode.value || !streamUrl.value) {
+        logText('ERROR: Network Code and Stream URL are required for VOD' +
+                'streams.');
         setStatus('Error');
         return;
       }
@@ -48,24 +49,33 @@ function init() {
 
     if (liveStreamButton.checked) {
       logText('Requesting PodServing Live Stream');
-      requestPodLiveStream(netcode.value, assetkey.value, apikey.value);
+      requestPodLiveStream(networkCode.value, assetkey.value, apikey.value);
       isVodStream = false;
     } else {
       logText('Requesting PodServing VOD Stream');
-      requestPodVodStream(netcode.value);
+      requestPodVodStream(networkCode.value);
       isVodStream = true;
     }
   };
 }
 
 /**
- * Clears the stream parameter input fields.
+ * Clears the stream parameter input fields and updates UI to show only the
+ * relevant inputs for the selected stream type.
  */
-function clearStreamParameters() {
+function resetStreamParameters() {
   streamUrl.value = '';
-  netcode.value = '';
+  networkCode.value = '';
   assetkey.value = '';
   apikey.value = '';
+
+  const liveStreamParamContainer =
+      document.getElementById('live-stream-only-params');
+  if (liveStreamButton.checked) {
+    liveStreamParamContainer.classList.remove('hidden');
+  } else {
+    liveStreamParamContainer.classList.add('hidden');
+  }
 }
 
 /**

diff --git a/podserving/dash_js/styles.css b/podserving/dash_js/styles.css
@@ -69,3 +69,7 @@ button {
 #countdown {
   margin: 5px 0;
 }
+
+.hidden {
+  display: none;
+}
diff --git a/podserving/hls_js/index.html b/podserving/hls_js/index.html
@@ -17,14 +17,16 @@ <h1>Pod Serving Sample (<span id="playbackMethod">Unknown</span>)</h1>
       <span>Network Code:</span>
       <input id="network-code" type="text" value="51636543">
     </label>
-    <label>
-      <span>Custom Asset Key:</span>
-      <input id="custom-asset-key" type="text" value="google-sample">
-    </label>
-    <label>
-      <span>API Key:</span>
-      <input id="api-key" type="text" value="">
-    </label>
+    <div id="live-stream-only-params">
+      <label>
+        <span>Custom Asset Key:</span>
+        <input id="custom-asset-key" type="text">
+      </label>
+      <label>
+        <span>API Key:</span>
+        <input id="api-key" type="text">
+      </label>
+    </div>
     <label>
       <span>Pod request type:</span>
       <div id="request-type">

diff --git a/podserving/hls_js/player.js b/podserving/hls_js/player.js
@@ -7,7 +7,7 @@ let streamId;
 const pmElement = document.getElementById('playbackMethod');
 
 const streamUrl = document.getElementById('stream-manifest');
-const netcode = document.getElementById('network-code');
+const networkCode = document.getElementById('network-code');
 const assetkey = document.getElementById('custom-asset-key');
 const apikey = document.getElementById('api-key');
 const liveStreamButton = document.getElementById('live-stream-request');
@@ -29,41 +29,60 @@ function init() {
   }
 
   // Clear the stream parameters when switching stream types.
-  liveStreamButton.addEventListener('click', clearStreamParameters);
-  vodStreamButton.addEventListener('click', clearStreamParameters);
+  liveStreamButton.addEventListener('click', resetStreamParameters);
+  vodStreamButton.addEventListener('click', resetStreamParameters);
 
   requestButton.onclick = (e) => {
     e.preventDefault();
-    if (!netcode.value || !assetkey.value || !streamUrl.value) {
-      logText('ERROR: Network Code, Asset Key, and Stream URL are required');
-      setStatus('Error');
-      return;
+    if (liveStreamButton.checked) {
+      if (!networkCode.value || !assetkey.value || !streamUrl.value) {
+        logText('ERROR: Network Code, Asset Key, and Stream URL are required' +
+               ' for live streams.');
+        setStatus('Error');
+        return;
+      }
+      isVodStream = false;
+    } else {
+      if (!networkCode.value || !streamUrl.value) {
+        logText('ERROR: Network Code and Stream URL are required for VOD' +
+                'streams.');
+        setStatus('Error');
+        return;
+      }
+      isVodStream = true;
     }
 
     initiateStreamManager();
     // clear HLS.js instance, if in use.
     hls?.destroy();
 
-    if (liveStreamButton.checked) {
+    if (!isVodStream) {
       logText('Requesting PodServing Live Stream');
-      requestPodLiveStream(netcode.value, assetkey.value, apikey.value);
-      isVodStream = false;
+      requestPodLiveStream(networkCode.value, assetkey.value, apikey.value);
     } else {
       logText('Requesting PodServing VOD Stream');
-      requestPodVodStream(netcode.value, assetkey.value, apikey.value);
-      isVodStream = true;
+      requestPodVodStream(networkCode.value);
     }
   };
 }
 
 /**
- * Clears the stream parameter input fields.
+ * Clears the stream parameter input fields and updates UI to show only the
+ * relevant inputs for the selected stream type.
  */
-function clearStreamParameters() {
+function resetStreamParameters() {
   streamUrl.value = '';
-  netcode.value = '';
+  networkCode.value = '';
   assetkey.value = '';
   apikey.value = '';
+
+  const liveStreamParamContainer =
+      document.getElementById('live-stream-only-params');
+  if (liveStreamButton.checked) {
+    liveStreamParamContainer.classList.remove('hidden');
+  } else {
+    liveStreamParamContainer.classList.add('hidden');
+  }
 }
 
 /**
@@ -123,14 +142,10 @@ function requestPodLiveStream(networkCode, customAssetKey, apiKey) {
 /**
  * Request a pod VOD stream from Google.
  * @param {string} networkCode - the network code.
- * @param {string} customAssetKey - the asset key.
- * @param {string} apiKey - the api key (optional).
  */
-function requestPodVodStream(networkCode, customAssetKey, apiKey) {
+function requestPodVodStream(networkCode) {
   const streamRequest = new google.ima.dai.api.PodVodStreamRequest();
   streamRequest.networkCode = networkCode;
-  streamRequest.customAssetKey = customAssetKey;
-  streamRequest.apiKey = apiKey;
   streamManager.requestStream(streamRequest);
 }
 

diff --git a/podserving/hls_js/styles.css b/podserving/hls_js/styles.css
@@ -69,3 +69,7 @@ button {
 #countdown {
   margin: 5px 0;
 }
+
+.hidden {
+  display: none;
+}