youtube embeds fixes #3

This commit is contained in:
Ryan Stafford 2023-07-03 22:43:16 -04:00
parent ac24e7c28b
commit a850af0526
6 changed files with 46 additions and 9 deletions

View file

@ -381,6 +381,9 @@ code {
.expando-button:hover{ .expando-button:hover{
background-color: #466599; background-color: #466599;
} }
.expando-button.hidden {
display: none;
}
.expando { .expando {
display: none; display: none;
max-width: 587px; max-width: 587px;
@ -392,7 +395,7 @@ code {
.expando img { .expando img {
max-width: 100%; max-width: 100%;
} }
.expando > div { .expando .md {
background-color: #fafafa; background-color: #fafafa;
border: 1px solid #369; border: 1px solid #369;
border-radius: 7px; border-radius: 7px;
@ -401,7 +404,7 @@ code {
font-size: 14px; font-size: 14px;
overflow: auto; overflow: auto;
} }
.dark .expando > div { .dark .expando .md {
background-color: #262626; background-color: #262626;
color: #ddd; color: #ddd;
} }

View file

@ -24,9 +24,14 @@ function postClick(e) {
if (bdy.className.indexOf("open")>-1) { if (bdy.className.indexOf("open")>-1) {
bdy.className = 'expando'; bdy.className = 'expando';
btn.className = "expando-button" btn.className = "expando-button"
targ.getElementsByClassName("embed")[0].innerHTML = ""
} else { } else {
bdy.className = 'expando open'; bdy.className = 'expando open';
btn.className = "expando-button 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) { function commentClick(e) {
@ -89,3 +94,29 @@ function formSubmit(e) {
}) })
return false 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"
}
}
}

View file

@ -771,6 +771,9 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
fmt.Println(err) fmt.Println(err)
} }
case "create_post": case "create_post":
if state.CommunityName == "" {
state.CommunityName = r.FormValue("communityname")
}
state.GetCommunity(state.CommunityName) state.GetCommunity(state.CommunityName)
state.GetSite() state.GetSite()
if state.Community == nil { if state.Community == nil {

View file

@ -2,7 +2,7 @@
<head> <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> <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="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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body {{ if .Dark }}class="dark"{{end}}> <body {{ if .Dark }}class="dark"{{end}}>

View file

@ -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> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg"> <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> </head>
<body{{ if .Dark }} class="dark"{{end}}> <body{{ if .Dark }} class="dark"{{end}}>
<noscript> <noscript>

View file

@ -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="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="entry">
<div class="title"> <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 . }}) ({{ domain . }})
</div> </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> <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>
{{ end }}
<div class="meta"> <div class="meta">
submitted submitted
<span title="{{.Post.Published.Time}}">{{ humanize .Post.Published.Time -}}</span> <span title="{{.Post.Published.Time}}">{{ humanize .Post.Published.Time -}}</span>
@ -59,11 +58,12 @@
</div> </div>
<div class="expando {{ if eq .Rank 0 }}open{{ end}}"> <div class="expando {{ if eq .Rank 0 }}open{{ end}}">
{{ if (and .Post.Body.IsValid (ne .Post.Body.String "")) }} {{ 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 }} {{ end }}
{{ if isImage .Post.URL.String}} {{ if isImage .Post.URL.String}}
<img loading="lazy" src="{{ .Post.URL }}"> <img loading="lazy" src="{{ .Post.URL }}">
{{ end }} {{ end }}
<div class="embed"></div>
</div> </div>
</div> </div>
<div></div> <div></div>