youtube embeds fixes #3

rystaf · Jul 4, 2023 · a850af0 · a850af0
1 parent ac24e7c
commit a850af0
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 9 deletions.
diff --git a/public/style.css b/public/style.css
@@ -381,6 +381,9 @@ code {
 .expando-button:hover{
   background-color: #466599;
 }
+.expando-button.hidden {
+  display: none;
+}
 .expando {
   display: none;
   max-width: 587px;
@@ -392,7 +395,7 @@ code {
 .expando img {
   max-width: 100%;
 }
-.expando > div {
+.expando .md {
   background-color: #fafafa;
   border: 1px solid #369;
   border-radius: 7px;
@@ -401,7 +404,7 @@ code {
   font-size: 14px;
   overflow: auto;
 }
-.dark .expando > div {
+.dark .expando .md {
   background-color: #262626;
   color: #ddd;
 }

diff --git a/public/utils.js b/public/utils.js
@@ -24,9 +24,14 @@ function postClick(e) {
   if (bdy.className.indexOf("open")>-1) {
     bdy.className = 'expando';
     btn.className = "expando-button"
+    targ.getElementsByClassName("embed")[0].innerHTML = ""
   } else {
     bdy.className = 'expando open';
     btn.className = "expando-button open"
+    var url = targ.getElementsByClassName("url")[0].href
+    if (id = parse_youtube(url)) {
+      targ.getElementsByClassName("embed")[0].innerHTML = youtube_iframe(id)
+    }
   }
 }
 function commentClick(e) {
@@ -89,3 +94,29 @@ function formSubmit(e) {
   })
   return false
 }
+
+function parse_youtube(url){
+  var regExp = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
+  var match = url.match(regExp);
+  if (match.length > 1) {
+    return match[1]
+  }
+  return false
+}
+function youtube_iframe(id) {
+  return '<iframe width="560" height="315" src="https://www.youtube.com/embed/'+id+'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'
+}
+
+var posts = document.getElementsByClassName("post")
+for (var i = 0; i < posts.length; i++) {
+  var url = posts[i].getElementsByClassName("url")[0].href
+  if (id = parse_youtube(url)) {
+    var btn = posts[i].getElementsByClassName("expando-button")[0]
+    if (btn.className.indexOf("open") > -1) {
+      console.log(id)
+      posts[i].getElementsByClassName("embed")[0].innerHTML = youtube_iframe(id)
+    } else {
+      btn.className = "expando-button"
+    }
+  }
+}
diff --git a/routes.go b/routes.go
@@ -771,6 +771,9 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 			fmt.Println(err)
 		}
 	case "create_post":
+		if state.CommunityName == "" {
+			state.CommunityName = r.FormValue("communityname")
+		}
 		state.GetCommunity(state.CommunityName)
 		state.GetSite()
 		if state.Community == nil {

diff --git a/templates/frontpage.html b/templates/frontpage.html
@@ -2,7 +2,7 @@
   <head>
     <title>{{ if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
     <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
-    <link rel="stylesheet" href="/_/static/style.css?1">
+    <link rel="stylesheet" href="/_/static/style.css?3">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body {{ if .Dark }}class="dark"{{end}}>

diff --git a/templates/main.html b/templates/main.html
@@ -3,7 +3,7 @@
     <title>{{if and .Posts .PostID }}{{ (index .Posts 0).Post.Name}} : {{.CommunityName}}{{else if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
-    <link rel="stylesheet" href="/_/static/style.css?1">
+    <link rel="stylesheet" href="/_/static/style.css?3">
   </head>
   <body{{ if .Dark }} class="dark"{{end}}>
     <noscript>

diff --git a/templates/post.html b/templates/post.html
@@ -24,12 +24,11 @@
         <div class="thumb" style="background-image: url({{if .Post.ThumbnailURL.IsValid}}{{.Post.ThumbnailURL.String}}?format=jpg&thumbnail=96{{else if .Post.URL.IsValid}}/_/static/link.png{{else}}/_/static/text.png{{end}})"></div>
         <div class="entry">
           <div class="title">
-            <a href="{{ if .Post.URL.IsValid }}{{ .Post.URL }}{{ else }}/{{ .State.Host }}/post/{{ .Post.ID }}{{ end }}">{{ .Post.Name }}</a>
+            <a class="url" href="{{ if .Post.URL.IsValid }}{{ .Post.URL }}{{ else }}/{{ .State.Host }}/post/{{ .Post.ID }}{{ end }}">{{ .Post.Name }}</a>
             ({{ domain . }})
           </div>
-{{ if or (and .Post.Body.IsValid (ne .Post.Body.String "")) (isImage .Post.URL.String) }}
-          <div class="expando-button {{ if eq .Rank 0}}open{{ end }}"></div>
-{{ end }}
+
+          <div class="expando-button {{ if and (not (and .Post.Body.IsValid .Post.Body.String )) (not (isImage .Post.URL.String)) }}hidden{{else if eq .Rank 0}}open{{ end }}"></div>
           <div class="meta">
             submitted
             <span title="{{.Post.Published.Time}}">{{ humanize .Post.Published.Time -}}</span>
@@ -59,11 +58,12 @@
           </div>
           <div class="expando {{ if eq .Rank 0 }}open{{ end}}">
 {{ if (and .Post.Body.IsValid (ne .Post.Body.String "")) }}
-            <div>{{ markdown .State.Host .Post.Body.String }}</div>
+            <div class="md">{{ markdown .State.Host .Post.Body.String }}</div>
 {{ end }}
 {{ if isImage .Post.URL.String}}
             <img loading="lazy" src="{{ .Post.URL }}">
 {{ end }}
+            <div class="embed"></div>
           </div>
         </div>
         <div></div>