.

jeongmin · Oct 24, 2017 · 1015799 · 1015799
1 parent 6513460
commit 1015799
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 231 deletions.
diff --git a/collapse.html b/collapse.html
diff --git a/main.go b/main.go
@@ -46,6 +46,7 @@ func handler(w http.ResponseWriter, r *http.Request) {
 		responseMediaPlaylist(w, mediapl)
 	case m3u8.MASTER:
 		masterpl := p.(*m3u8.MasterPlaylist)
+		masterpl.FullUrl = m3u8Url
 		masterpl.BaseUrl = m3u8BaseUrl
 		responseMasterPlaylist(w, masterpl)
 	}
@@ -56,15 +57,15 @@ func responseMasterPlaylist(w http.ResponseWriter, masterPlaylist *m3u8.MasterPl
 		"byteToMb": byteToMb,
 	}
 
-	t := template.Must(template.New("master-playlist.html").Funcs(fmap).ParseFiles("master-playlist.html"))
+	t := template.Must(template.New("master-playlist.html").Funcs(fmap).ParseFiles("static/template/master-playlist.html"))
 	err := t.Execute(w, masterPlaylist)
 	if err != nil {
 		panic(err)
 	}
 }
 
 func responseMediaPlaylist(w http.ResponseWriter, mediaPlaylist *m3u8.MediaPlaylist) {
-	t := template.Must(template.New("media-playlist.html").Funcs(fmap).ParseFiles("media-playlist.html"))
+	t := template.Must(template.New("media-playlist.html").Funcs(fmap).ParseFiles("static/template/media-playlist.html"))
 	err := t.Execute(w, mediaPlaylist)
 	if err != nil {
 		panic(err)
@@ -86,8 +87,14 @@ func main() {
 	//"https://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8"
 	//"https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8"
 	//"https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8"
+	//"http://nas.yatopark.net:39800/playlist"
+	//https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8
 	corsObj := handlers.AllowedOrigins([]string{"*"})
 	r := mux.NewRouter()
 	r.HandleFunc("/", handler).Methods("POST")
+	r.Handle("/", http.FileServer(http.Dir("./static/")))
+	r.PathPrefix("/").Handler(http.FileServer(http.Dir("./static/")))
+	r.PathPrefix("/js").Handler(http.FileServer(http.Dir("./static/js")))
+	r.PathPrefix("/css").Handler(http.FileServer(http.Dir("./static/css")))
 	http.ListenAndServe(":9000", handlers.CORS(corsObj)(r))
 }
diff --git a/static/css/#hls-reader.css# b/static/css/#hls-reader.css#
@@ -0,0 +1,29 @@
+ul {
+   list-style:none;
+}
+
+#read {
+    cursor: pointer;
+}
+
+#title-text {
+    padding-top: 20px;
+}
+
+#m3u8-input-label {
+    margin-top: 10px;
+}
+
+#controll-buttons {
+    margin-top: 10px;
+}
+
+#master-playlist {
+    margin-top: 20px;    
+    padding: 10px;
+}
+
+.badge {
+    margin-right: 10px;
+}
+
diff --git a/static/css/.#hls-reader.css b/static/css/.#hls-reader.css
@@ -0,0 +1 @@
+jay@jay.25184:1508470635
diff --git a/hls-reader.css → static/css/hls-reader.css b/hls-reader.css → static/css/hls-reader.css
diff --git a/hls-reader.html → static/index.html b/hls-reader.html → static/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" >
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
           crossorigin="anonymous">    
-    <link rel="stylesheet" type="text/css" href="hls-reader.css">
+    <link rel="stylesheet" type="text/css" href="css/hls-reader.css">
 
     <title>HLS READER</title>
   </head>
@@ -22,7 +22,7 @@ <h1 id="title-text">HLS READER</h1>
 
     <label id="m3u8-input-label" for="m3u8Url">M3U8 URL</label>    
     <div class="input-group">
-      <input type="url" class="form-control" id="m3u8Url" placeholder="Url of the m3u8 you wanna read" aria-label="Url of the m3u8 you wanna read" aria-describedby="basic-addon2" name="m3u8Url" value="https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8" autofocus>
+      <input type="url" class="form-control" id="m3u8Url" placeholder="Insert url of the m3u8 you wanna read" aria-label="Url of the m3u8 you wanna read" aria-describedby="basic-addon2" name="m3u8Url" autofocus>
       <span class="input-group-addon" id="read">READ</span>	
     </div>
 
@@ -32,11 +32,11 @@ <h1 id="title-text">HLS READER</h1>
       <button type="button" class="btn btn-primary" id="btn-collapse-all">Collapse All</button>
     </div>
 
-    <div id="master-playlist"></div>    
+    <div id="master-playlist" class="border border-secondary rounded" ></div>    
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>    
-    <script src="hlsreader.js"></script>    
+    <script src="js/hlsreader.js"></script>    
   </body>
 </html>
diff --git a/hlsreader.js → static/js/hlsreader.js b/hlsreader.js → static/js/hlsreader.js
@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+$(document).ready(function() {
     $(function () {
 	$('[data-toggle="tooltip"]').tooltip()
     })
@@ -11,12 +11,21 @@ document.addEventListener('DOMContentLoaded', function() {
     $('#master-playlist').on('click', '.variant-url', function() {	
 	if ($(this).children().attr('class').match('badge-secondary')) {
 	    m3u8Url = $(this).siblings('span').attr('data-item').trim();
-	    variantInfo = $(this).siblings('span').attr('data-variantinfo').trim();
-    	    appendMediaPlaylist(variantInfo, m3u8Url, $(this).attr('href').slice(1), $(this).parent());
+	    targetId = $(this).siblings('span').attr('data-target-id').trim();
+    	    appendMediaPlaylist(targetId, m3u8Url, $(this).attr('href').slice(1), $(this).parent());
 	    $(this).children().removeClass('badge-secondary').addClass('badge-info').text("Media Playlist");
 	}	
     });
 
+    $('#master-playlist').on('click', '.alternative-url', function() {	
+	if ($(this).children().attr('class').match('badge-secondary')) {
+	    m3u8Url = $(this).siblings('span').attr('data-item').trim();
+	    targetId = $(this).siblings('span').attr('data-target-id').trim();
+	    appendMediaPlaylist(targetId, m3u8Url, $(this).attr('href').slice(1), $(this).parent());
+	    $(this).children().removeClass('badge-secondary').addClass('badge-info').text("Alternative Media Playlist");
+	}	
+    });
+
     $('#btn-clear').click(function() {
 	$('#master-playlist').empty();
     });
@@ -28,8 +37,7 @@ document.addEventListener('DOMContentLoaded', function() {
     $('#btn-collapse-all').click(function() {
 	$('.collapse').collapse('hide');
     });
-
-}, false);
+});
 
 function readM3u8(m3u8Url, selector) {
     $.ajax({
@@ -39,7 +47,7 @@ function readM3u8(m3u8Url, selector) {
     	    m3u8Url: m3u8Url
     	},
     	dataType: 'text',
-    	success: function (result) {    	    
+    	success: function (result) {	    
 	    $(selector).append(result);
     	},
     	error: function (xhr, status, errorThrown) {
@@ -57,7 +65,7 @@ function appendMediaPlaylist(variantInfo, m3u8Url, elementId, element) {
 	    variantInfo: variantInfo	    
     	},
     	dataType: 'text',
-    	success: function (result) {	    	    	    
+    	success: function (result) {	    
 	    element.append('<ul class="collapse" id=\"' + elementId + '\">' + result + '</ul>');	    
     	},
     	error: function (xhr, status, errorThrown) {

diff --git a/master-playlist.html → static/template/master-playlist.html b/master-playlist.html → static/template/master-playlist.html
@@ -3,10 +3,19 @@ <h3>Master Playlist</h3>
   {{$m3u8BaseUrl := .BaseUrl}}
   {{if .Args}}<li><span class="badge badge-info">Args</span>{{.Args}}</li>{{end}}
   {{if .CypherVersion}}<li><span class="badge badge-info">CypherVersion</span>{{.CypherVersion}}</li>{{end}}
+  <li>
+    <a href="{{.FullUrl}}">
+      <span class="badge badge-primary">Download Raw Data</span>
+    </a>
+  </li>
 
   {{$variants_len := len .Variants}}
   {{if $variants_len}}  
-  <li><a data-toggle="collapse" href="#variants"><span class="badge badge-info">{{$variants_len}} Variants</span></a></li>
+  <li>
+    <a data-toggle="collapse" href="#variants">
+      <span class="badge badge-info">{{$variants_len}} Variants</span>
+    </a>    
+  </li>
   <ul class="collapse" id="variants">
     {{range $index, $variant := .Variants}}
     <li><a data-toggle="collapse" href="#variant-{{$index}}"><span class="badge badge-info">Variant[{{$index}}]</span></a>{{.URI}}</li>
@@ -26,7 +35,12 @@ <h3>Master Playlist</h3>
 	<a class="variant-url" data-toggle="collapse" data-target="#mp-variant-{{$index}}" href="#mp-variant-{{$index}}">
 	  <span class="badge badge-secondary" data-toggle="tooltip" data-placement="top" title="URL of variant">Load Media Playlist</span>
 	</a>
-	<span class="variant-patial-url" data-variantinfo="variant-{{$index}}" data-item="{{$m3u8BaseUrl}}{{.URI}}" data-type="text">{{.URI}}</span>
+
+	<a href="{{$m3u8BaseUrl}}{{.URI}}">
+	  <span class="badge badge-primary">Download Raw Data</span>
+	</a>
+
+	<span class="variant-patial-url" data-target-id="variant-{{$index}}" data-item="{{$m3u8BaseUrl}}{{.URI}}" data-type="text">{{.URI}}</span>
       </li>
       {{end}}
 
@@ -46,7 +60,20 @@ <h3>Master Playlist</h3>
 	  {{if .Forced}}<li><span class="badge badge-info">Forced</span>{{.Forced}}</li>{{end}}	  	  
 	  {{if .Characteristics}}<li><span class="badge badge-info">Characteristics</span>{{.Characteristics}}</li>{{end}}	  	  
 	  {{if .Subtitles}}<li><span class="badge badge-info">Subtitles</span>{{.Subtitles}}</li>{{end}}
-	  {{if .URI}}<li><a href="{{$m3u8BaseUrl}}{{.URI}}"><span class="badge badge-info">Alternative URI</span></a>{{.URI}}</li>{{end}}
+	  {{if .URI}}
+	  <li>
+	    <a class="alternative-url" data-toggle="collapse" data-target="#alt-{{$index}}"  href="#alt-{{$index}}">
+	      <span class="badge badge-secondary">Load Alternative URI</span>
+	    </a>
+
+	    <a href="{{$m3u8BaseUrl}}{{.URI}}">
+	      <span class="badge badge-primary">Download Raw Data</span>
+	    </a>
+
+	    <span class="alt-patial-url" data-target-id="alt-{{$index}}" data-item="{{$m3u8BaseUrl}}{{.URI}}" data-type="text">{{.URI}}</span>	    
+	    {{.URI}}
+	  </li>
+	  {{end}}
 	</ul>
 	{{end}}
       </ul>

diff --git a/media-playlist.html → static/template/media-playlist.html b/media-playlist.html → static/template/media-playlist.html
diff --git a/test.html b/test.html