wishpal_ironfan
/
tiefen_space_app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

删除推荐流和关注流主播卡片的视频

This commit is contained in:
yezian 2024-01-10 01:17:58 +08:00
parent b85999a68b
commit 1e599f02dc
3 changed files with 78 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/StreamerCard/index.jsx
View File

@ -4,20 +4,13 @@ import {
TouchableOpacity,
Image as NativeImage,
} from "react-native";
import React, { memo, useContext, useMemo } from "react";
import React, { memo } from "react";
import { useTailwind } from "tailwind-rn";
import { Image } from "expo-image";
import { Video, ResizeMode } from "expo-av";
import { FeedShowVideoContext } from "../../screeens/Stream/FeedStream";
import { SameCityShowVideoContext } from "../../screeens/Stream/FollowStream";
import { useNavigation } from "@react-navigation/native";
function StreamerCard({ data, screen }) {
function StreamerCard({ data }) {
const navigation = useNavigation();
const showVideo = useContext(
screen === "feed" ? FeedShowVideoContext : SameCityShowVideoContext
);
const isPlaying = useMemo(() => showVideo.includes(data?.mid), [showVideo]);
const tailwind = useTailwind();
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
@ -109,22 +102,7 @@ function StreamerCard({ data, screen }) {
transition={1000}
placeholder={blurhash}
cachePolicy="disk"
style={
isPlaying
? tailwind("w-full h-full z-0 absolute")
: tailwind("w-full h-full z-20 absolute")
}
/>
<Video
style={tailwind("z-10 w-full h-full")}
isLooping
shouldPlay={isPlaying}
isMuted
useNativeControls={false}
source={{
uri: data?.shorts?.videos[0]?.urls[0],
}}
resizeMode={ResizeMode.COVER}
style={tailwind("w-full h-full")}
/>
</View>
<View style={tailwind("flex-col flex-1 ml-1")}>

21
screeens/Stream/FeedStream/index.jsx
View File

@ -6,7 +6,7 @@ import {
Easing,
TouchableOpacity,
} from "react-native";
import React, { useState, useRef, createContext, useEffect } from "react";
import React, { useState, useRef, useEffect } from "react";
import StreamerCard from "../../../components/StreamerCard";
import Empty from "../../../components/Empty";
import { useTailwind } from "tailwind-rn";
@ -16,8 +16,6 @@ import { generateSignature } from "../../../utils/crypto";
import { FlashList } from "@shopify/flash-list";
import { Svg, Path } from "react-native-svg";
export const FeedShowVideoContext = createContext("");
export default function FeedStream() {
//获取推荐的主播mid
const [recommMids, setRecommMids] = useState([]);
@ -143,16 +141,8 @@ export default function FeedStream() {
}, [recommMids]);
const tailwind = useTailwind();
const renderItem = ({ item }) => <StreamerCard data={item} screen="feed" />;
const renderItem = ({ item }) => <StreamerCard data={item} />;
const [refreshing, setRefreshing] = useState(false);
const [showVideo, setShowVideo] = useState([]);
const handleVideoShow = useRef(({ viewableItems }) => {
let visibleMid = viewableItems.map((item) => {
return item.item.mid;
});
setShowVideo(visibleMid);
}).current;
//刷新动画
const flatListRef = useRef(null);
@ -181,7 +171,6 @@ export default function FeedStream() {
};
return (
<FeedShowVideoContext.Provider value={showVideo}>
<View style={tailwind("flex-1")}>
<FlashList
ref={flatListRef}
@ -206,11 +195,6 @@ export default function FeedStream() {
)}
</View>
}
viewabilityConfig={{
waitForInteraction: false,
itemVisiblePercentThreshold: 10,
}}
onViewableItemsChanged={handleVideoShow}
keyExtractor={(item) => item.mid}
/>
<TouchableOpacity
@ -237,6 +221,5 @@ export default function FeedStream() {
</Animated.View>
</TouchableOpacity>
</View>
</FeedShowVideoContext.Provider>
);
}

23
screeens/Stream/FollowStream/index.jsx
View File

@ -1,5 +1,5 @@
import { View, FlatList, RefreshControl } from "react-native";
import React, { useState, useRef, createContext, useEffect } from "react";
import { View, RefreshControl } from "react-native";
import React, { useState, useEffect } from "react";
import StreamerCard from "../../../components/StreamerCard";
import Empty from "../../../components/Empty";
import { useTailwind } from "tailwind-rn";
@ -9,8 +9,6 @@ import { get } from "../../../utils/storeInfo";
import { generateSignature } from "../../../utils/crypto";
import { FlashList } from "@shopify/flash-list";
export const SameCityShowVideoContext = createContext("");
export default function FollowStream() {
//获取关注的主播mid
const [followMids, setFollowMids] = useState([]);
@ -121,9 +119,8 @@ export default function FollowStream() {
}, [followMids]);
const tailwind = useTailwind();
const renderItem = ({ item }) => <StreamerCard data={item} screen="follow" />;
const renderItem = ({ item }) => <StreamerCard data={item} />;
const [refreshing, setRefreshing] = useState(false);
const [showVideo, setShowVideo] = useState([]);
//下拉刷新
const handleRefresh = async () => {
setRefreshing(true);
@ -132,14 +129,8 @@ export default function FollowStream() {
await getFollowMids();
setRefreshing(false);
};
const handleVideoShow = useRef(({ viewableItems }) => {
let visibleMid = viewableItems.map((item) => {
return item.item.mid;
});
setShowVideo(visibleMid);
}).current;
return (
<SameCityShowVideoContext.Provider value={showVideo}>
<View style={tailwind("flex-1")}>
<FlashList
data={data}
@ -156,14 +147,8 @@ export default function FollowStream() {
}
onEndReached={() => getData("bottom")}
ListEmptyComponent={<Empty type="friendship" />}
viewabilityConfig={{
waitForInteraction: false,
itemVisiblePercentThreshold: 10,
}}
onViewableItemsChanged={handleVideoShow}
keyExtractor={(item) => item.mid}
/>
</View>
</SameCityShowVideoContext.Provider>
);
}