Allow multiple videos per Time Machine submission

This commit is contained in:
Ben Visness 2023-06-28 16:03:56 -05:00
parent 8aa18901b2
commit 0895660972
4 changed files with 63 additions and 18 deletions

View File

@ -96,12 +96,12 @@ type TimeMachineEmailData struct {
Username string Username string
UserEmail string UserEmail string
DiscordUsername string DiscordUsername string
MediaUrl string MediaUrls []string
DeviceInfo string DeviceInfo string
Description string Description string
} }
func SendTimeMachineEmail(profileUrl, username, userEmail, discordUsername, mediaUrl, deviceInfo, description string, perf *perf.RequestPerf) error { func SendTimeMachineEmail(profileUrl, username, userEmail, discordUsername string, mediaUrls []string, deviceInfo, description string, perf *perf.RequestPerf) error {
perf.StartBlock("EMAIL", "Time machine email") perf.StartBlock("EMAIL", "Time machine email")
defer perf.EndBlock() defer perf.EndBlock()
@ -110,7 +110,7 @@ func SendTimeMachineEmail(profileUrl, username, userEmail, discordUsername, medi
Username: username, Username: username,
UserEmail: userEmail, UserEmail: userEmail,
DiscordUsername: discordUsername, DiscordUsername: discordUsername,
MediaUrl: mediaUrl, MediaUrls: mediaUrls,
DeviceInfo: deviceInfo, DeviceInfo: deviceInfo,
Description: description, Description: description,
}) })

View File

@ -1,5 +1,10 @@
<p>Submission by <b><a href="{{ .ProfileUrl }}">{{ .Username }}</a></b> ({{ .UserEmail }}) {{ if .DiscordUsername }} On Discord: {{ .DiscordUsername }} {{ end }}</p> <p>Submission by <b><a href="{{ .ProfileUrl }}">{{ .Username }}</a></b> ({{ .UserEmail }}) {{ if .DiscordUsername }} On Discord: {{ .DiscordUsername }} {{ end }}</p>
<p>Submitted url: <a href="{{ .MediaUrl }}">{{ .MediaUrl }}</a></p> <p>Submitted urls:<p>
<ul>
{{ range .MediaUrls }}
<li><a href="{{ . }}">{{ . }}</a></li>
{{ end }}
</ul>
Device info:<br /> Device info:<br />
<pre>{{ .DeviceInfo }}</pre> <pre>{{ .DeviceInfo }}</pre>
Description:<br /> Description:<br />

View File

@ -20,16 +20,21 @@
<img class="pixelated" src="{{ dataimg "timemachine/win95-media.png" }}"> <img class="pixelated" src="{{ dataimg "timemachine/win95-media.png" }}">
</div> </div>
<div class="flex flex-column flex-grow-1 g1"> <div class="flex flex-column flex-grow-1 g1">
<strong>Video URL</strong> <strong>Video URLs</strong>
<input <div id="media-inputs" class="flex flex-column g1">
class="win95-input" <input
type="url" class="win95-input"
name="media_url" type="url"
required name="media_url"
> required
>
</div>
<div class="f7">
<a href="javascript:anotherVideo()">+ Add video</a>
</div>
<div class="f7 less-spacing"> <div class="f7 less-spacing">
<p> <p>
Take video of yourself using an old device. The video should: Take videos of yourself using an old device. The videos should:
</p> </p>
<ul> <ul>
<li>Show the entire device</li> <li>Show the entire device</li>
@ -37,9 +42,14 @@
<li>Have minimal editing and clear sound</li> <li>Have minimal editing and clear sound</li>
</ul> </ul>
<p> <p>
Upload the video somewhere publicly accessible, then share the link here. We can download videos from file-sharing services or any video service supported by youtube-dl. <a href="javascript:terms()">See licensing terms.</a> Upload the videos somewhere publicly accessible, then share the link here. We can download videos from file-sharing services or any video service supported by youtube-dl. <a href="javascript:terms()">See licensing terms.</a>
</p>
<p>
If you have a comparable modern device, feel free to submit video of that as well!
</p> </p>
<div id="terms" class="dn"> <div id="terms" class="dn">
<div></div> <!-- now the hr is not the :first-child -->
<hr>
<p>By submitting this form, you are granting us permission to:</p> <p>By submitting this form, you are granting us permission to:</p>
<ul> <ul>
<li>Download copies of any submitted videos</li> <li>Download copies of any submitted videos</li>
@ -88,13 +98,17 @@
</div> </div>
<script> <script>
let form = document.querySelector("form"); let form = document.querySelector("form");
let mediaUrl = document.querySelector("[name=media_url]");
let deviceInfo = document.querySelector("[name=device_info]"); let deviceInfo = document.querySelector("[name=device_info]");
let description = document.querySelector("[name=description]"); let description = document.querySelector("[name=description]");
let submitBtn = document.querySelector("[type=submit]"); let submitBtn = document.querySelector("[type=submit]");
function mediaUrls() {
return document.querySelectorAll("[name=media_url]");
}
function saveData() { function saveData() {
localStorage.setItem("tm_media_url", mediaUrl.value); const urls = Array.from(mediaUrls()).map(i => i.value);
localStorage.setItem("tm_media_url", JSON.stringify(urls));
localStorage.setItem("tm_device_info", deviceInfo.value); localStorage.setItem("tm_device_info", deviceInfo.value);
localStorage.setItem("tm_description", description.value); localStorage.setItem("tm_description", description.value);
} }
@ -107,12 +121,34 @@
saveData(); saveData();
}); });
mediaUrl.value = localStorage.getItem("tm_media_url") ?? ""; const urlsStr = localStorage.getItem("tm_media_url") ?? "";
let urls = [];
if (urlsStr[0] === "[") {
urls = JSON.parse(urlsStr);
} else if (urlsStr) {
urls = [urlsStr];
}
for (let i = 1; i < urls.length; i++) {
anotherVideo();
}
for (const [i, input] of mediaUrls().entries()) {
input.value = urls[i] ?? "";
}
deviceInfo.value = localStorage.getItem("tm_device_info") ?? ""; deviceInfo.value = localStorage.getItem("tm_device_info") ?? "";
description.value = localStorage.getItem("tm_description") ?? ""; description.value = localStorage.getItem("tm_description") ?? "";
function terms() { function terms() {
document.querySelector("#terms").classList.toggle("dn"); document.querySelector("#terms").classList.toggle("dn");
} }
function anotherVideo() {
const input = document.createElement("input");
input.classList.add("win95-input");
input.type = "url";
input.name = "media_url";
document.querySelector("#media-inputs").appendChild(input);
}
</script> </script>
{{ end }} {{ end }}

View File

@ -98,10 +98,14 @@ func TimeMachineForm(c *RequestContext) ResponseData {
func TimeMachineFormSubmit(c *RequestContext) ResponseData { func TimeMachineFormSubmit(c *RequestContext) ResponseData {
c.Req.ParseForm() c.Req.ParseForm()
mediaUrl := strings.TrimSpace(c.Req.Form.Get("media_url")) mediaUrls := c.Req.Form["media_url"]
deviceInfo := strings.TrimSpace(c.Req.Form.Get("device_info")) deviceInfo := strings.TrimSpace(c.Req.Form.Get("device_info"))
description := strings.TrimSpace(c.Req.Form.Get("description")) description := strings.TrimSpace(c.Req.Form.Get("description"))
for i := range mediaUrls {
mediaUrls[i] = strings.TrimSpace(mediaUrls[i])
}
discordUsername := "" discordUsername := ""
if c.CurrentUser.DiscordUser != nil { if c.CurrentUser.DiscordUser != nil {
discordUsername = c.CurrentUser.DiscordUser.Username discordUsername = c.CurrentUser.DiscordUser.Username
@ -111,7 +115,7 @@ func TimeMachineFormSubmit(c *RequestContext) ResponseData {
c.CurrentUser.BestName(), c.CurrentUser.BestName(),
c.CurrentUser.Email, c.CurrentUser.Email,
discordUsername, discordUsername,
mediaUrl, mediaUrls,
deviceInfo, deviceInfo,
description, description,
c.Perf, c.Perf,