Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(feed): video duration calculated from Video component #1405

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix(feed): video duration calculated from Video component #1405

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d68f2c0
fix: video duration calculated from Video component
sujal-into Nov 21, 2024
749be8b
fix: added mp4video package
sujal-into Nov 22, 2024
738d456
fix: function to get the video duration
sujal-into Nov 22, 2024
fc32d31
fix: types for the mp4box package
sujal-into Nov 22, 2024
19a7b6e
fix: hooks to fetch duration
sujal-into Nov 22, 2024
e1dad48
fix: removed the Video from expo-av
sujal-into Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions packages/components/video/VideoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { AVPlaybackStatus, Video } from "expo-av";
import { isEqual } from "lodash";
import React, { memo, useState } from "react";
import {
Expand Down Expand Up @@ -41,6 +42,7 @@ import { SpacerColumn, SpacerRow } from "../spacer";

import { LocationButton } from "@/components/socialFeed/NewsFeed/LocationButton";
import { useAppNavigation } from "@/hooks/navigation/useAppNavigation";
import { web3ToWeb2URI } from "@/utils/ipfs";

const IMAGE_HEIGHT = 173;
const VIDEO_CARD_WIDTH = 261;
Expand All @@ -56,6 +58,7 @@ export const VideoCard: React.FC<{
const authorNSInfo = useNSUserInfo(post.authorId);
const [, userAddress] = parseUserId(post.authorId);
const [isHovered, setIsHovered] = useState(false);
const [duration, setDuration] = useState(0);

let cardWidth = StyleSheet.flatten(style)?.width;
if (typeof cardWidth !== "number") {
Expand All @@ -72,12 +75,19 @@ export const VideoCard: React.FC<{
: "ipfs://" + video.videoFile.thumbnailFileData?.url // we need this hack because ipfs "urls" in feed are raw CIDs
: defaultThumbnailImage;

const getVideoDuration = (status: AVPlaybackStatus) => {
if (status.isLoaded && status?.durationMillis) {
setDuration(status.durationMillis);
}
};

if (!video)
return (
<BrandText style={[fontSemibold13, { color: errorColor }]}>
Video not found
</BrandText>
);

return (
<View
style={[
Expand Down Expand Up @@ -115,10 +125,17 @@ export const VideoCard: React.FC<{
},
]}
/>

<Video
source={{ uri: web3ToWeb2URI(video.videoFile.url) }}
onPlaybackStatusUpdate={getVideoDuration}
videoStyle={{
height: 0,
width: 0,
}}
/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We must find another solution

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Experimented with new approach:
749be8b
738d456
fc32d31
19a7b6e
e1dad48

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The best thing would be to store the duration at the post's creation. It's another PR that we have to pause before making some refactos

<View style={imgDurationBoxStyle}>
<BrandText style={fontSemibold13}>
{prettyMediaDuration(video.videoFile.videoMetadata?.duration)}
{prettyMediaDuration(duration)}
</BrandText>
</View>

Expand Down
Loading