support video preview and playback with hls streams

5 files changed, 29 insertions, 8 deletions

diff --git a/src/mixins/comment.pug b/src/mixins/comment.pug
index ec01dad..545ee59 100644
--- a/src/mixins/comment.pug
+++ b/src/mixins/comment.pug
@@ -10,6 +10,9 @@ mixin comment(com, isfirst)
       div.comment-info-container
         div.info-item u/#{data.author}
         div.info-item ↑ #{fmtnum(data.ups)}
+        if data.collapsed_reason_code == "DELETED"
+          div.info-item 
+            a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
       div.comment-body 
         != data.body_html
       div.replies
diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index f5819d4..cbe2365 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -4,7 +4,8 @@ mixin post(p)
     div.post-container
       div.post-text
         div.title-container
-          != p.title
+          a(href=`/comments/${p.id}`)
+            != p.title
           span.domain   (#{p.domain})
         div.info-container 
           div.info-item ↑ #{fmtnum(p.ups)}
@@ -17,9 +18,9 @@ mixin post(p)
         if p.post_hint == "image" || p.post_hint == "link"
           if p.thumbnail && p.thumbnail != "self" || p.thumbnail != "default"
             a(href=p.url)
-              img(src=p.thumbnail width='100px') 
-          else if p.post_hint == "hosted:video"
-            - var url = p.secure_media.reddit_video.fallback_url
-            a(href=url)
-              video(src=url height='100px')
+              img(src=p.thumbnail width='100px' height='100px') 
+        else if p.post_hint == "hosted:video"
+          - var url = p.secure_media.reddit_video.dash_url
+          a(href=url)
+            video(src=url controls data-dashjs-player="" width='100px' height='100px')
 
diff --git a/src/public/styles.css b/src/public/styles.css
index 60cd2c3..385b341 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -134,6 +134,15 @@ nav {
   margin-bottom: 10px;
 }
 
+.title-container > a {
+  color: black;
+  text-decoration: none;
+}
+
+.title-container > a:visited {
+  color: #999;
+}
+
 .comment-info-container {
   margin-bottom: -12px;
 }
diff --git a/src/views/comments.pug b/src/views/comments.pug
index 0539b27..2b2b76e 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -6,17 +6,22 @@ html
     meta(charset='UTF-8')
     title reddit
     link(rel='stylesheet', href='/styles.css')
+    script(src="https://cdn.dashjs.org/latest/dash.all.min.js")
   body
     main#content
       div.hero
         a(href=`/r/${post.subreddit}`)
           h4 ← r/#{post.subreddit}
         h2 #{post.title}
+
         if post.post_hint == 'image'
           img(src=post.url).post-media
         else if post.post_hint == 'hosted:video'
-          video(src=post.url).post-media
-        p.self-text !{post.selftext_html}
+          - var url = post.secure_media.reddit_video.dash_url
+          video(controls data-dashjs-player src=`${url}`).post-media
+
+        if post.selftext_html
+          p.self-text !{post.selftext_html}
 
       div.comments-container
         each child in comments
diff --git a/src/views/index.pug b/src/views/index.pug
index 526d800..8bbef65 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -7,6 +7,7 @@ html
     meta(charset='UTF-8')
     title reddit
     link(rel='stylesheet', href='/styles.css')
+    script(src="https://cdn.dashjs.org/latest/dash.all.min.js")
 
   +subMgmt()
   script.
@@ -34,6 +35,8 @@ html
           a(href=`/`) home
         div.header-item
           a(href=`/subs`) subscriptions
+        div.header-item
+          a(href=`/r/popular`) popular
 
       div.hero
         a(href=`/r/${subreddit}`)