Add alt-text to videos, and fix like state on following feed. Fixes #48

Author: dansup

resources/js/components/Feed/VideoPlayer.vue

@@ -579,6 +579,7 @@ const props = defineProps({
     commentCount: { type: Number, default: 0 },
     index: { type: Number, default: 0 },
     isSensitive: { type: Boolean, default: false },
+    altText: { type: String, default: "" },
 });
 
 const emit = defineEmits(["interaction"]);
@@ -808,6 +809,14 @@ onMounted(async () => {
         });
         player.on("ready", () => {
             playerReady.value = true;
+
+            if (props.altText) {
+                const el = player.el().querySelector("video");
+
+                if (el) {
+                    el.setAttribute("aria-label", props.altText);
+                }
+            }
         });
         player.on("play", function () {
             isPaused.value = false;

resources/js/pages/feed/following.vue

@@ -109,12 +109,15 @@ const getVideoProps = (post, index) => ({
     caption: post.caption,
     hashtags: [],
     likes: post.likes,
+    hasLiked: post.has_liked,
     bookmarks: 0,
     shares: 0,
     comments: [],
+    canComment: post.permissions?.can_comment,
     "comment-count": post.comments,
     index: index,
     isSensitive: post?.is_sensitive,
+    altText: post?.media.alt_text,
 });
 
 const getVideoKey = (post) => post.id;

resources/js/pages/index.vue

@@ -62,6 +62,7 @@ const getVideoProps = (post, index) => ({
     "comment-count": post.comments,
     index: index,
     isSensitive: post?.is_sensitive,
+    altText: post?.media.alt_text,
 });
 
 const getVideoKey = (post) => post.id;

resources/js/pages/v/index.vue

@@ -152,6 +152,7 @@
                     loop
                     controls
                     class="h-screen mx-auto"
+                    :aria-label="currentVideo.media.alt_text"
                     :src="currentVideo.media.src_url"
                     @loadeddata="onVideoLoaded"
                     @error="onVideoError"