Link preview changes and video player

This commit is contained in:
Gabriel 2022-08-29 19:54:54 -04:00
parent ad5dd633e9
commit 332becdf6f
7 changed files with 67 additions and 54 deletions

View file

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
margin:0;
background-color: black;
overflow: hidden;
}
video{
width:100vw;
max-height: 100vh;
}
</style>
</head>
<body>
<video controls id="main">
<source src="">
</video>
<script>
//https://davidwalsh.name/query-string-javascript
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
var source = document.createElement('source')
source.src = '/media/'+getUrlParameter('v');
document.getElementById('main').appendChild(source);
</script>
</body>
</html>

View file

@ -9,13 +9,13 @@
<meta property="og:url" content="{{.Permalink}}">
{{if .Params.video}}
<meta name="twitter:card" content="player"/>
<meta property="og:video" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
<meta property="og:video:url" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
<meta property="og:video:secure_url" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
<meta property="og:video" content="https://libresolutions.network/embed?v={{.Params.video}}">
<meta property="og:video:url" content="https://libresolutions.network/embed?v={{.Params.video}}">
<meta property="og:video:secure_url" content="https://libresolutions.network/embed?v={{.Params.video}}">
<meta property="og:type" content="video">
<meta name="twitter:player:width" content="480" />
<meta name="twitter:player:height" content="360" />
<meta property="twitter:player" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
<meta property="twitter:player" content="https://libresolutions.network/embed?v={{.Params.video}}">
{{else}}
{{if .Params.peertubeURL}}
<meta property="og:video" content="{{.Params.peertubeURL}}">

View file

@ -15,12 +15,19 @@
</section>
{{end}}
{{end}}
<hr>
<h2>Recent Content</h2>
{{range first 5 .Site.RegularPages}}
<section class="recent">
<a href="{{.Permalink}}">
{{if .Params.video}}
<video controls>
<source src="{{.Params.video}}">
</video>
{{else}}
<img src="{{.Params.image}}">
{{end}}
</a>
<div>
<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>

View file

@ -2,8 +2,12 @@
<channel>
<title>{{ .Title }}</title>
<link>{{ .Permalink }}</link>
<description>{{.Params.description}}</description>
<image href="{{.Site.Params.image}}"/>
<description>{{.Site.Data.details.description}}</description>
<image>
<title>Libre Solutions Network</title>
<link>https://libresolutions.network</link>
<url>{{.Site.BaseURL}}{{.Site.Data.details.logo}}</url>
</image>
<generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
<language>{{.}}</language>{{end}}
{{ with .OutputFormats.Get "RSS" }}
@ -18,10 +22,10 @@
<guid>{{ .Permalink }}</guid>
<image>{{.Params.image}}</image>
{{ if .Params.audio }}
<enclosure url="{{.Params.audio}}" />
<enclosure url="{{.Site.BaseURL}}{{.Params.audio}}" />
{{end}}
{{ if .Params.video}}
<enclosure url="{{.Params.video}}" />
<enclosure url="{{.Site.BaseURL}}{{.Params.video}}" />
{{end}}
<description>{{- .Content | html -}}</description>
</item>

View file

@ -1,5 +1,7 @@
<a href="{{ .Get 0 }}" class="link-preview">
{{if .Get 3}}
<img src='{{.Get 3}}'>
{{end}}
<div>
<h3>{{ .Get 1 }}</h3>
<p>{{.Get 2 }}</p>

View file

@ -0,0 +1,27 @@
<style>
article video{
position: absolute;
top:0;
left: 0;
width:100vw;
max-height: 100vh;
max-width: initial;
}
</style>
<video controls id="main">
<source src="">
</video>
<script>
//https://davidwalsh.name/query-string-javascript
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
var source = document.createElement('source')
source.src = '/media/'+getUrlParameter('v');
document.getElementById('main').appendChild(source);
</script>

View file

@ -42,6 +42,9 @@ nav{
border-radius:30%;
}
h1{
font-size:250%;
}
p {
}
@ -159,6 +162,7 @@ section {
padding: 1.25rem;
border-radius: 1rem;
min-width: 30vw;
font-size:125%;
}
article {
@ -212,15 +216,22 @@ article img,
article video,
article iframe {
align-self: center;
max-width: 40rem;
max-width: 60rem;
width: 80%;
min-height: fit-content;
}
article iframe{
height:30rem;
}
section iframe,
article iframe {
width: 80%;
height: 25rem;
article>section>a{
display:flex;
flex-direction: column;
align-items: center;
}
table{
width:fit-content;
}
@ -246,9 +257,6 @@ video{
text-align: left;
max-width: 80%;
}
.link-preview>*{
margin:0.5rem;
}
.link-preview>img{
max-width: 20%;
}
@ -285,7 +293,9 @@ aside .listing img{
padding:0;
}
.recent img,
.featured img{
.featured img,
.recent video,
.featured video{
max-width:20rem;
max-height:10rem;
margin:1rem;