gochan/gochan
1
0
Fork 0
mirror of https://github.com/Eggbertx/gochan.git synced 2025-08-19 08:26:23 -07:00
Code Releases Activity

Show embed on IP search page and add sample embed script for Youtube, Vimeo, and raw video embedding

Browse source
This commit is contained in:
Eggbertx 2025-03-23 16:13:14 -07:00
parent c648b41795
commit af07b34752
3 changed files with 86 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

74
examples/scripts/embeds.js Normal file
View file

@ -0,0 +1,74 @@
const embedWidth = 400;
const embedHeight = 300;
function closeEmbedClicked(e) {
e.preventDefault();
const $this = $(this);
const $fileInfo = $this.parents(".file-info");
const $uploadContainer = $fileInfo.siblings("a.upload-container");
const $embed = $uploadContainer.find(".embed");
if($embed.hasClass("embed-rawvideo")) {
$embed.attr({
"controls": false,
"width": $embed.attr("orig-width"),
"height": $embed.attr("orig-height")
}).css({
"max-width": $embed.attr("orig-width"),
"max-height": $embed.attr("orig-height")
});
$embed[0].pause();
$embed[0].currentTime = 0;
$fileInfo.find(".close-container").remove();
return;
} else {
$embed.addClass("thumb");
$uploadContainer.show();
$fileInfo.siblings(".embed.video").remove();
}
$this.parent().remove();
}
$("a.upload-container").filter((_i,el) => el.querySelector(".embed")).on("click", function(e) {
e.preventDefault();
const $this = $(this);
const $embed = $this.find(".embed");
const $fileInfo = $this.siblings(".file-info");
const videoURL = new URL($fileInfo.find("a.embed-orig").attr("href"));
$this.parent(".reply").find(".embed.video").remove();
if($embed.hasClass("embed-youtube") && $embed.hasClass("thumb")) {
const videoID = videoURL.searchParams.get("v");
$embed.removeClass("thumb");
$embed.attr("thumb-src", $embed.attr("src"));
$fileInfo.after(`<iframe class="embed video embed-youtube" src="https://www.youtube.com/embed/${videoID}" frameborder="0" width="${embedWidth}" height="${embedHeight}" allowfullscreen></iframe>`);
$this.hide();
$fileInfo.append(` <span class="close-container">[<a class="close-thumb" href="#">Close</a>]</span>`);
$fileInfo.find("a.close-thumb").on("click", closeEmbedClicked);
} else if($embed.hasClass("embed-vimeo") && $embed.hasClass("thumb")) {
const videoID = videoURL.pathname.split("/").pop();
$embed.removeClass("thumb");
$embed.attr("thumb-src", $embed.attr("src"));
$fileInfo.after(`<iframe class="embed video embed-vimeo" src="https://player.vimeo.com/video/${videoID}" frameborder="0" width="${embedWidth}" height="${embedHeight}" allowfullscreen></iframe>`);
$this.hide();
$fileInfo.append(` <span class="close-container">[<a class="close-thumb" href="#">Close</a>]</span>`);
$fileInfo.find("a.close-thumb").on("click", closeEmbedClicked);
} else if($embed.hasClass("embed-rawvideo")) {
if($embed[0].tagName !== "VIDEO") {
return;
}
$embed.attr({
"orig-width": $embed.width(),
"orig-height": $embed.height(),
});
$embed.attr({
"controls": true,
"width": embedWidth,
"height": embedHeight
}).css({
"max-width": embedWidth,
"max-height": embedHeight
});
$fileInfo.append(` <span class="close-container">[<a class="close-thumb" href="#">Close</a>]</span>`);
$fileInfo.find("a.close-thumb").on("click", closeEmbedClicked);
}
});

1
frontend/ts/dom/postelement.ts
View file

@ -104,7 +104,6 @@ export function createPostElement(post: ThreadPost, boardDir: string, elementCla
export function shrinkOriginalFilenames(elem = $(document.body)) {
elem.find<HTMLAnchorElement>("a.file-orig").each((i, el) => {
const isEmbed = el.getAttribute("download") === null;
console.log(el, isEmbed);
const ext = extname(el.innerText);
const noExt = el.innerText.slice(0,el.innerText.lastIndexOf("."));
const filenameMaxLength = isEmbed ? 32 : 16;

14
templates/manage_ipsearch.html
View file

@ -1,6 +1,10 @@
{{define "uploadinfo" -}}
<div class="file-info">
File: <a href="../{{.BoardDir}}/src/{{.Filename}}" target="_blank">{{.Filename}}</a> - ({{formatFilesize .Filesize}}{{if and (gt .UploadHeight 0) (gt .UploadWidth 0)}}, {{.UploadWidth}}x{{.UploadHeight}}{{end}}, <a href="../{{.BoardDir}}/src/{{.Filename}}" class="file-orig" download="{{.OriginalFilename}}">{{.OriginalFilename}}</a>)
{{- if .HasEmbed -}}
Embed: <a href="{{.UploadPath}}" target="_blank" class="embed-orig">{{.UploadPath}}</a>
{{- else -}}
File: <a href="{{.UploadPath}}" target="_blank">{{.Filename}}</a> - ({{formatFilesize .Filesize}}{{if and (gt .UploadHeight 0) (gt .UploadWidth 0)}}, {{.UploadWidth}}x{{.UploadHeight}}{{end}}, <a href="{{.UploadPath}}" class="file-orig" download="{{.OriginalFilename}}">{{.OriginalFilename}}</a>)
{{- end -}}
</div>
{{- end -}}
<fieldset>
@ -44,7 +48,13 @@
<div class="file-deleted-box" style="text-align:center;">File removed</div>
{{- else if ne .Filename "" -}}
{{- template "uploadinfo" . -}}
<a class="upload-container" href="{{.UploadPath}}"><img src="{{.ThumbnailPath}}" alt="{{.UploadPath}}" width="{{.ThumbnailWidth}}" height="{{.ThumbnailHeight}}" class="upload" /></a>
<a class="upload-container" href="{{.UploadPath}}">
{{- if .HasEmbed -}}
{{embedMedia .}}
{{- else -}}
<img src="{{getThumbnailWebPath .ID}}" alt="{{.UploadPath}}" width="{{.ThumbnailWidth}}" height="{{.ThumbnailHeight}}" class="upload thumb" />
{{- end -}}
</a>
{{- end -}}
{{.Message}}