blisstown/campfire
blisstown/campfire
2
0
Fork 0
Code Issues 20 Pull requests Projects 1 Releases Activity

data version tracking, video support, a11y tweaks

Browse source
This commit is contained in:
ari melody 2024-06-21 07:19:31 +01:00
parent e9c6510286
commit 6c68fb3aa2
Signed by: ari
GPG key ID: CF99829C92678188
4 changed files with 33 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "spacesocial-client",
"version": "0.1.0",
"version": "0.1.1",
"description": "social media for the galaxy-wide-web! 🌌",
"type": "module",
"scripts": {

1
src/client/api.js
View file

@ -148,6 +148,7 @@ export async function parsePost(data, num_replies) {
post.boost_count = data.reblogs_count;
post.reply_count = data.replies_count;
post.mentions = data.mentions;
if (data.media_attachments.length > 0) console.log(data.media_attachments);
post.files = data.media_attachments;
post.url = data.url;
post.visibility = data.visibility;

7
src/client/client.js
View file

@ -1,3 +1,4 @@
import { version as APP_VERSION } from '../../package.json';
import { Instance, server_types } from './instance.js';
import * as api from './api.js';
@ -118,6 +119,7 @@ export class Client {
save() {
localStorage.setItem(save_name, JSON.stringify({
version: APP_VERSION,
instance: {
host: this.instance.host,
version: this.instance.version,
@ -130,6 +132,11 @@ export class Client {
let json = localStorage.getItem(save_name);
if (!json) return false;
let saved = JSON.parse(json);
if (!saved.version || saved.version !== APP_VERSION) {
localStorage.setItem(save_name + '-backup', json);
localStorage.removeItem(save_name);
return false;
}
this.instance = new Instance(saved.instance.host, saved.instance.version);
this.app = saved.app;
return true;

34
src/post/Body.svelte
View file

@ -8,7 +8,7 @@
<div class="post-body">
{#if post.warning}
<p class="post-warning" on:click={() => { open_warned = !open_warned }}>
<button class="post-warning" on:click={() => { open_warned = !open_warned }}>
<strong>
{post.warning}
<span class="warning-instructions">
@ -19,7 +19,7 @@
{/if}
</span>
</strong>
</p>
</button>
{/if}
{#if !post.warning || open_warned}
{#if post.text}
@ -27,10 +27,18 @@
{/if}
<div class="post-media-container" data-count={post.files.length}>
{#each post.files as file}
<div class="post-media image">
<a href={file.url} target="_blank">
<img src={file.url} alt={file.alt} height="200" loading="lazy" decoding="async">
</a>
<div class="post-media {file.type}">
{#if file.type === "image"}
<a href={file.url} target="_blank">
<img src={file.url} alt={file.description} height="200" loading="lazy" decoding="async">
</a>
{:else if file.type === "video"}
<video controls height="200">
<source src={file.url} type={file.url.endsWith('.mp4') ? 'video/mp4' : 'video/webm'}>
<p>{file.description} &ensp; <a href={file.url}>[link]</a></p>
<!-- <media src={file.url} alt={file.description} loading="lazy" decoding="async"> -->
</video>
{/if}
</div>
{/each}
</div>
@ -47,10 +55,15 @@
}
.post-warning {
margin-bottom: 6px;
width: 100%;
margin-bottom: 10px;
padding: 4px 8px;
--warn-bg: rgba(255,220,30,.1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
font-size: inherit;
color: inherit;
text-align: left;
border: none;
border-radius: 8px;
cursor: pointer;
outline-color: var(--warn-bg);
@ -139,7 +152,7 @@
.post-media-container {
max-height: 540px;
margin-top: 8px;
margin: 16px 0 4px 0;
display: grid;
grid-gap: 8px;
}
@ -176,7 +189,8 @@
cursor: zoom-in;
}
.post-media a img {
.post-media img,
.post-media video {
width: 100%;
height: 100%;
display: block;