删除推荐流和关注流主播卡片的视频
This commit is contained in:
parent
b85999a68b
commit
1e599f02dc
|
|
@ -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")}>
|
||||
|
|
|
|||
|
|
@ -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,62 +171,55 @@ export default function FeedStream() {
|
|||
};
|
||||
|
||||
return (
|
||||
<FeedShowVideoContext.Provider value={showVideo}>
|
||||
<View style={tailwind("flex-1")}>
|
||||
<FlashList
|
||||
ref={flatListRef}
|
||||
data={data}
|
||||
renderItem={renderItem}
|
||||
estimatedItemSize={352}
|
||||
initialNumToRender={4}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
colors={["#FF669E"]}
|
||||
tintColor="white"
|
||||
refreshing={refreshing}
|
||||
onRefresh={() => handleRefresh()}
|
||||
/>
|
||||
}
|
||||
onEndReached={() => getData("bottom")}
|
||||
ListEmptyComponent={<Empty type="nodata" />}
|
||||
ListFooterComponent={
|
||||
<View>
|
||||
{isActivityIndicatorShow && data.length !== 0 && (
|
||||
<ActivityIndicator style={tailwind("my-4")} size="large" />
|
||||
)}
|
||||
</View>
|
||||
}
|
||||
viewabilityConfig={{
|
||||
waitForInteraction: false,
|
||||
itemVisiblePercentThreshold: 10,
|
||||
}}
|
||||
onViewableItemsChanged={handleVideoShow}
|
||||
keyExtractor={(item) => item.mid}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={tailwind(
|
||||
"absolute right-5 bottom-5 bg-[#13121F] p-1 rounded-full"
|
||||
)}
|
||||
onPress={handleRefresh}
|
||||
>
|
||||
<Animated.View style={{ transform: [{ rotate: spin }] }}>
|
||||
<Svg viewBox="0 0 1024 1024" width="30" height="30">
|
||||
<Path
|
||||
d="M855.7 546.3c-16.6 0-30-13.5-30-30.1 0.1-72.8-25.1-143.9-71-200.4l-1-1.3c-31.5-38.5-72.1-69.2-117.3-88.9l-0.6-0.2-2.2-1c-6.8-2.9-14.3-5.6-22.9-8.4l-0.6-0.2-6.5-2.3c-7.1-2.1-14.7-3.9-20.6-5.3-1.2-0.3-2.3-0.5-3.5-0.8-2.1-0.5-4-1-5.6-1.3l-0.4-0.1c-6.8-1.4-14.1-2.5-21.7-3.3l-0.8-0.1-8.4-1.2c-73.7-7.1-147.4 12.6-207.8 55.6-13.5 9.6-32.2 6.5-41.8-7-9.6-13.5-6.5-32.2 7-41.8 72.3-51.5 160.8-75.1 249.1-66.4l1.3 0.2 8.7 1.2c9 1 17.8 2.4 26 4 3.1 0.6 6 1.3 8.6 1.9 1 0.2 1.9 0.5 2.9 0.7 7 1.6 16.2 3.8 25.2 6.5l1.2 0.4 6.9 2.4c10.2 3.4 19.3 6.7 27.7 10.3l0.8 0.4 2.4 1.1c54.1 23.6 102.4 60.4 139.9 106.3l1 1.4c54.4 67.1 84.2 151.5 84.1 237.9-0.1 16.4-13.6 29.8-30.1 29.8z"
|
||||
fill="#ffffff"
|
||||
></Path>
|
||||
<Path
|
||||
d="M872.5 661.6l78.9-114.5c9-13.1-0.3-30.9-16.3-30.9H777.4c-15.9 0-25.3 17.8-16.3 30.9L840 661.6c7.9 11.4 24.7 11.4 32.5 0zM513.3 884.1c-12 0-24-0.6-36-1.8l-1.3-0.2-8.6-1.2c-9-1-17.8-2.4-26-4-3.1-0.6-6-1.3-8.6-1.9-1-0.2-1.9-0.5-2.9-0.7-7-1.6-16.2-3.8-25.2-6.5l-1.2-0.4-6.9-2.4c-10.2-3.4-19.3-6.7-27.7-10.3l-0.8-0.4-2.4-1.1c-54.1-23.6-102.4-60.4-139.9-106.3l-1-1.4c-54.4-67.1-84.2-151.5-84.1-237.9 0-16.6 13.5-29.9 30-29.9h0.1c16.6 0 30 13.5 29.9 30.1-0.1 72.8 25.1 143.9 71 200.4l1 1.3c31.5 38.5 72.1 69.2 117.3 88.9l2.8 1.3c6.8 2.9 14.3 5.6 22.9 8.4l0.6 0.2 6.5 2.3c7.1 2.1 14.7 3.9 20.6 5.3 1.2 0.3 2.3 0.5 3.5 0.8 2.1 0.5 4 1 5.6 1.3l0.4 0.1c6.8 1.3 14.1 2.5 21.7 3.3l0.8 0.1 8.4 1.2c73.7 7.1 147.4-12.6 207.8-55.6 13.5-9.6 32.2-6.5 41.8 7 9.6 13.5 6.5 32.2-7 41.8-62.5 44.5-137 68.2-213.1 68.2z"
|
||||
fill="#ffffff"
|
||||
></Path>
|
||||
<Path
|
||||
d="M153.8 362.4L74.9 476.9c-9 13.1 0.3 30.9 16.3 30.9H249c15.9 0 25.3-17.8 16.3-30.9l-78.9-114.5c-7.9-11.4-24.7-11.4-32.6 0z"
|
||||
fill="#ffffff"
|
||||
></Path>
|
||||
</Svg>
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</FeedShowVideoContext.Provider>
|
||||
<View style={tailwind("flex-1")}>
|
||||
<FlashList
|
||||
ref={flatListRef}
|
||||
data={data}
|
||||
renderItem={renderItem}
|
||||
estimatedItemSize={352}
|
||||
initialNumToRender={4}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
colors={["#FF669E"]}
|
||||
tintColor="white"
|
||||
refreshing={refreshing}
|
||||
onRefresh={() => handleRefresh()}
|
||||
/>
|
||||
}
|
||||
onEndReached={() => getData("bottom")}
|
||||
ListEmptyComponent={<Empty type="nodata" />}
|
||||
ListFooterComponent={
|
||||
<View>
|
||||
{isActivityIndicatorShow && data.length !== 0 && (
|
||||
<ActivityIndicator style={tailwind("my-4")} size="large" />
|
||||
)}
|
||||
</View>
|
||||
}
|
||||
keyExtractor={(item) => item.mid}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={tailwind(
|
||||
"absolute right-5 bottom-5 bg-[#13121F] p-1 rounded-full"
|
||||
)}
|
||||
onPress={handleRefresh}
|
||||
>
|
||||
<Animated.View style={{ transform: [{ rotate: spin }] }}>
|
||||
<Svg viewBox="0 0 1024 1024" width="30" height="30">
|
||||
<Path
|
||||
d="M855.7 546.3c-16.6 0-30-13.5-30-30.1 0.1-72.8-25.1-143.9-71-200.4l-1-1.3c-31.5-38.5-72.1-69.2-117.3-88.9l-0.6-0.2-2.2-1c-6.8-2.9-14.3-5.6-22.9-8.4l-0.6-0.2-6.5-2.3c-7.1-2.1-14.7-3.9-20.6-5.3-1.2-0.3-2.3-0.5-3.5-0.8-2.1-0.5-4-1-5.6-1.3l-0.4-0.1c-6.8-1.4-14.1-2.5-21.7-3.3l-0.8-0.1-8.4-1.2c-73.7-7.1-147.4 12.6-207.8 55.6-13.5 9.6-32.2 6.5-41.8-7-9.6-13.5-6.5-32.2 7-41.8 72.3-51.5 160.8-75.1 249.1-66.4l1.3 0.2 8.7 1.2c9 1 17.8 2.4 26 4 3.1 0.6 6 1.3 8.6 1.9 1 0.2 1.9 0.5 2.9 0.7 7 1.6 16.2 3.8 25.2 6.5l1.2 0.4 6.9 2.4c10.2 3.4 19.3 6.7 27.7 10.3l0.8 0.4 2.4 1.1c54.1 23.6 102.4 60.4 139.9 106.3l1 1.4c54.4 67.1 84.2 151.5 84.1 237.9-0.1 16.4-13.6 29.8-30.1 29.8z"
|
||||
fill="#ffffff"
|
||||
></Path>
|
||||
<Path
|
||||
d="M872.5 661.6l78.9-114.5c9-13.1-0.3-30.9-16.3-30.9H777.4c-15.9 0-25.3 17.8-16.3 30.9L840 661.6c7.9 11.4 24.7 11.4 32.5 0zM513.3 884.1c-12 0-24-0.6-36-1.8l-1.3-0.2-8.6-1.2c-9-1-17.8-2.4-26-4-3.1-0.6-6-1.3-8.6-1.9-1-0.2-1.9-0.5-2.9-0.7-7-1.6-16.2-3.8-25.2-6.5l-1.2-0.4-6.9-2.4c-10.2-3.4-19.3-6.7-27.7-10.3l-0.8-0.4-2.4-1.1c-54.1-23.6-102.4-60.4-139.9-106.3l-1-1.4c-54.4-67.1-84.2-151.5-84.1-237.9 0-16.6 13.5-29.9 30-29.9h0.1c16.6 0 30 13.5 29.9 30.1-0.1 72.8 25.1 143.9 71 200.4l1 1.3c31.5 38.5 72.1 69.2 117.3 88.9l2.8 1.3c6.8 2.9 14.3 5.6 22.9 8.4l0.6 0.2 6.5 2.3c7.1 2.1 14.7 3.9 20.6 5.3 1.2 0.3 2.3 0.5 3.5 0.8 2.1 0.5 4 1 5.6 1.3l0.4 0.1c6.8 1.3 14.1 2.5 21.7 3.3l0.8 0.1 8.4 1.2c73.7 7.1 147.4-12.6 207.8-55.6 13.5-9.6 32.2-6.5 41.8 7 9.6 13.5 6.5 32.2-7 41.8-62.5 44.5-137 68.2-213.1 68.2z"
|
||||
fill="#ffffff"
|
||||
></Path>
|
||||
<Path
|
||||
d="M153.8 362.4L74.9 476.9c-9 13.1 0.3 30.9 16.3 30.9H249c15.9 0 25.3-17.8 16.3-30.9l-78.9-114.5c-7.9-11.4-24.7-11.4-32.6 0z"
|
||||
fill="#ffffff"
|
||||
></Path>
|
||||
</Svg>
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,38 +129,26 @@ 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}
|
||||
renderItem={renderItem}
|
||||
estimatedItemSize={352}
|
||||
initialNumToRender={4}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
colors={["#FF669E"]}
|
||||
tintColor="white"
|
||||
refreshing={refreshing}
|
||||
onRefresh={() => handleRefresh()}
|
||||
/>
|
||||
}
|
||||
onEndReached={() => getData("bottom")}
|
||||
ListEmptyComponent={<Empty type="friendship" />}
|
||||
viewabilityConfig={{
|
||||
waitForInteraction: false,
|
||||
itemVisiblePercentThreshold: 10,
|
||||
}}
|
||||
onViewableItemsChanged={handleVideoShow}
|
||||
keyExtractor={(item) => item.mid}
|
||||
/>
|
||||
</View>
|
||||
</SameCityShowVideoContext.Provider>
|
||||
<View style={tailwind("flex-1")}>
|
||||
<FlashList
|
||||
data={data}
|
||||
renderItem={renderItem}
|
||||
estimatedItemSize={352}
|
||||
initialNumToRender={4}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
colors={["#FF669E"]}
|
||||
tintColor="white"
|
||||
refreshing={refreshing}
|
||||
onRefresh={() => handleRefresh()}
|
||||
/>
|
||||
}
|
||||
onEndReached={() => getData("bottom")}
|
||||
ListEmptyComponent={<Empty type="friendship" />}
|
||||
keyExtractor={(item) => item.mid}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue