data version tracking, video support, a11y tweaks

package.json

@@ -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": {

src/client/api.js

@@ -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;

src/client/client.js

@@ -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;

src/post/Body.svelte

@@ -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">
+                <div class="post-media {file.type}">
-                    <a href={file.url} target="_blank">
+                    {#if file.type === "image"}
-                        <img src={file.url} alt={file.alt} height="200" loading="lazy" decoding="async">
+                        <a href={file.url} target="_blank">
-                    </a>
+                            <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;