From b05964f2765e4b0c8d7c8f5fa14e97d8444ab9cd Mon Sep 17 00:00:00 2001
From: bipoza <bipoza@gmail.com>
Date: Sat, 10 Dec 2022 13:31:39 +0100
Subject: [PATCH] m3u8 file example

---
 README.MD                  |  5 ++++
 docs/index.html            | 55 +++++++++++++++++++++++++++++++++-----
 docs/video-js-example.html | 30 +++++++++++++++++++++
 3 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 docs/video-js-example.html

diff --git a/README.MD b/README.MD
index 57da93a..3d88fef 100644
--- a/README.MD
+++ b/README.MD
@@ -48,6 +48,11 @@ getTVCategory(category_slug).then(res => {
 });
 ````
 
+## Nola erreproduzitu ditzakegu m3u8 fitxategiak?
+Video.js liburutegia erabili dezakegu streaming fitxategia irakurri ahal izateko.
+
+Hemen adibidea: https://bipoza.github.io/nahieran-js/docs/video-js-example.html
+
 ## Garapen ingurunea martxan jartzeko
 JS funtzioak testeatzeko docs karpetan HTML sinple bat dago.
 
diff --git a/docs/index.html b/docs/index.html
index b5f5b6b..1c4194f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,7 +23,7 @@
 
         <div class="card mt-5 p-2">
             <div class="card-body">
-                <h2 class="text-primary">Get Programs</h2>
+                <h2 class="text-primary">Get program list</h2>
                 <code lang="javascript">import { getTVPrograms } from "nahieran-js";
 
 getTVPrograms().then(res => {
@@ -39,7 +39,7 @@ <h2 class="text-primary">Get Programs</h2>
 
         <div class="card mt-5 p-2">
             <div class="card-body">
-                <h2 class="text-primary card-title">Get TV Categories</h2>
+                <h2 class="text-primary card-title">Get tv categories</h2>
                 <code lang="javascript">import { getTVCategories } from "nahieran-js";
 
 getTVCategories().then(res => {
@@ -50,7 +50,7 @@ <h2 class="text-primary card-title">Get TV Categories</h2>
 
                 <br>
                 DEMO: <button type="button" class="btn btn-primary"
-                    onclick="getDocTVCategories()">GetTVCategories()</button>
+                    onclick="getDocTVCategories()">getTVCategories()</button>
             </div>
         </div>
 
@@ -58,7 +58,7 @@ <h2 class="text-primary card-title">Get TV Categories</h2>
 
         <div class="card mt-5 p-2">
             <div class="card-body">
-                <h2 class="text-primary">Get TV Category</h2>
+                <h2 class="text-primary">Get tv category</h2>
                 <code lang="javascript">import { getTVCategory } from "nahieran-js";
 
 getTVCategory(category_slug).then(res => {
@@ -68,7 +68,7 @@ <h2 class="text-primary">Get TV Category</h2>
 });</code>
                 <br>
                 DEMO: <input value="PELICULAS" id="getTVCategoryParam" /> <button type="button" class="btn btn-primary"
-                    onclick="getDocTVCategory()">GetTVCategory('PELICULAS')</button>
+                    onclick="getDocTVCategory()">getTVCategory('PELICULAS')</button>
             </div>
         </div>
 
@@ -78,7 +78,7 @@ <h2 class="text-primary">Get TV Category</h2>
 
         <div class="card mt-5 p-2">
             <div class="card-body">
-                <h2 class="text-primary">get TV Category Programs</h2>
+                <h2 class="text-primary">Get tv category programs</h2>
                 <code lang="javascript">import { getTVCategoryPrograms } from "nahieran-js";
 
 getTVCategoryPrograms(category_id).then(res => {
@@ -93,7 +93,27 @@ <h2 class="text-primary">get TV Category Programs</h2>
         </div>
 
 
+        <div class="card mt-5 p-2">
+            <div class="card-body">
+                <h2 class="text-primary">Get tv category program playlist</h2>
+                <code lang="javascript">import { getTVCategoryProgramPlaylist } from "nahieran-js";
+
+getTVCategoryProgramPlaylist(playlist_id).then(res => {
+    console.log("Response: ", res);
+}, err => {
+    console.error("Response error: ", err);
+});</code>
+                <br>
+                DEMO: <input value="8493" id="getTVCategoryProgramPlaylistParam" /> <button type="button"
+                    class="btn btn-primary" onclick="getDocTVCategoryProgramPlaylist()">getTVCategoryProgramPlaylist(8493)</button>
+            </div>
+        </div>
+
 
+
+        <video width="352" height="198" controls crossorigin="true">
+            <source src="https://vod.eitb.eus/1670684107_c8081146d40ca3566e3e1c86320ddb5c255cdbe8/vod/geozone1/2022/12/02/0011696943/0011696943_480x270_768000_58c0e0e5BnfYQOVbhvUs.m3u8" type="application/x-mpegURL">
+        </video>
     </div>
 
 
@@ -117,7 +137,14 @@ <h5 class="modal-title" id="modalTitle">...</h5>
 
 
 <script type="module">
-    import { getTVCategories, getTVCategory, getTVCategoryPrograms, getTVPrograms } from "../src/index.js";
+    import {
+        getTVCategories,
+        getTVCategory,
+        getTVCategoryPrograms,
+        getTVPrograms,
+        getTVCategoryProgramPlaylist
+    } from "../src/index.js";
+    
     const myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
     const getDocTVCategories = () => {
         getTVCategories().then(res => {
@@ -151,6 +178,19 @@ <h5 class="modal-title" id="modalTitle">...</h5>
         }, err => console.error("Response error: ", err));
     };
 
+
+    const getDocTVCategoryProgramPlaylist = () => {
+        const getTVCategoryProgramPlaylistParam = document.getElementById("getTVCategoryProgramPlaylistParam").value;
+
+        getTVCategoryProgramPlaylist(getTVCategoryProgramPlaylistParam).then(res => {
+            console.log("Response: ", res);
+            document.getElementById("modalTitle").innerText = "Get TV Category Programs";
+            document.getElementById("modalBody").innerText = JSON.stringify(res, undefined, 4);
+            myModal.show();
+        }, err => console.error("Response error: ", err));
+    };
+
+
     const getDocTVPrograms = () => {
         getTVPrograms().then(res => {
             console.log("Response: ", res);
@@ -162,6 +202,7 @@ <h5 class="modal-title" id="modalTitle">...</h5>
     window.getDocTVCategories = getDocTVCategories;
     window.getDocTVCategory = getDocTVCategory;
     window.getDocTVCategoryPrograms = getDocTVCategoryPrograms;
+    window.getDocTVCategoryProgramPlaylist = getDocTVCategoryProgramPlaylist;
     window.getDocTVPrograms = getDocTVPrograms;
 
 </script>
diff --git a/docs/video-js-example.html b/docs/video-js-example.html
new file mode 100644
index 0000000..cc06312
--- /dev/null
+++ b/docs/video-js-example.html
@@ -0,0 +1,30 @@
+<head>
+    <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
+  
+    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
+    <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
+  </head>
+  
+  <body>
+    <video
+      id="my-video"
+      class="video-js"
+      controls
+      preload="auto"
+      width="720"
+      height="480"
+      poster="https://euskalpmd.akamaized.net/vod/geozone1/2021/07/24/0013632097/0013632097_st_640x360_20874.jpg"
+      data-setup="{}"
+    >
+      <source src="https://vod.eitb.eus/1670685310_8940199a6ba8615480cdc36a9392d7feca7a1afb/vod/geozone1/2021/07/24/0013632097/0013632097_480x270_768000_a90ffb37zmPUCb8FYQG7.m3u8" type="application/x-mpegURL" />
+      <p class="vjs-no-js">
+        To view this video please enable JavaScript, and consider upgrading to a
+        web browser that
+        <a href="https://videojs.com/html5-video-support/" target="_blank"
+          >supports HTML5 video</a
+        >
+      </p>
+    </video>
+  
+    <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
+  </body>
\ No newline at end of file