tiefen_space_app/screeens/EditStreamerMedia/index.jsx

import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
  ActivityIndicator,
} from "react-native";
import React, { useState, useEffect, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Divider, Icon, Button } from "@rneui/themed";
import { Image } from "expo-image";
import { Formik } from "formik";
import MediaPicker from "../../components/MediaPicker";
import Toast from "react-native-toast-message";
import { get } from "../../utils/storeInfo";
import { multiUpload } from "../../utils/upload";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";
import MediaGrid from "../../components/MediaGrid";
import * as ImagePicker from "expo-image-picker";
import * as VideoThumbnails from "expo-video-thumbnails";

const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";

export default function EditStreamerMedia({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  //保存封面图
  const [displayImage, setDisplayImage] = useState([]);

  //选择封面图
  const pickDisPlayImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      quality: 1,
    });

    if (!result.canceled) {
      setDisplayImage(result.assets);
    }
  };

  //保存展示视频
  const [displayVideo, setDisplayVideo] = useState([]);

  //为视频生成封面
  const generateThumbnail = useCallback(async (uri) => {
    try {
      const videoCover = await VideoThumbnails.getThumbnailAsync(uri);
      return videoCover;
    } catch (e) {
      console.warn(e);
    }
  }, []);

  //选择视频
  const pickDisPlayVideo = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Videos,
      quality: 1,
    });

    if (!result.canceled) {
      for (let i = 0; i < result.assets.length; i++) {
        if (result.assets[i].duration > 0) {
          const videoCover = await generateThumbnail(result.assets[i].uri);
          result.assets[i].cover = videoCover.uri;
        }
      }
      setDisplayVideo(result.assets);
    }
  };

  //保存新添加的相册图片
  const [photos, setPhotos] = useState([]);
  //展示旧相册图片组件
  const [oldPhotos, setOldPhotos] = useState([]);

  //正在加载数据
  const [isLoading, setIsloading] = useState(true);
  useEffect(() => {
    const getData = async () => {
      const account = await get("account");
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      const signature = await generateSignature({
        mid: account?.mid,
        ...base,
      });
      try {
        //获取主播数据
        const streamerResponse = await fetch(
          `${apiUrl}/api/streamer/list_by_mid?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              mid: account?.mid,
              ...base,
            }),
          }
        );
        const streamerData = await streamerResponse.json();
        if (streamerData.ret === -1) {
          Toast.show({
            type: "error",
            text1: streamerData.msg,
            topOffset: 60,
          });
          return;
        }
        setDisplayImage([
          {
            notChanged: true,
            id: { image_ids: streamerData.data.streamer.cover.image_ids },
            uri: streamerData.data.streamer.cover.images[0].urls[0],
          },
        ]);
        setDisplayVideo([
          {
            notChanged: true,
            id: { video_ids: streamerData.data.streamer.shorts.video_ids },
            cover:
              streamerData?.data?.streamer?.shorts?.videos[0]?.cover_urls[0],
          },
        ]);
        setOldPhotos(streamerData.data.streamer.album.images);
        setIsloading(false);
      } catch (error) {
        console.error(error);
      }
    };
    getData();
  }, []);

  //正在提交状态
  const [isSubmitting, setIsSubmitting] = useState(false);

  //是否正在拖动图片，用于禁用ScrollView的滚动
  const [dragging, setDragging] = useState(false);

  //loading时展示加载中
  if (isLoading) {
    return (
      <ActivityIndicator style={tailwind("mt-32")} size="large" color="white" />
    );
  }

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      keyboardVerticalOffset={insets.bottom + 60}
      style={{
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <ScrollView scrollEnabled={!dragging} style={tailwind("px-4 py-4")}>
        <Formik
          initialValues={{}}
          enableReinitialize
          onSubmit={async () => {
            //相册不得低于2张
            if (oldPhotos.length + photos.length < 2) {
              Toast.show({
                type: "error",
                text1: "相册至少需要上传2张照片哦！",
                topOffset: 60,
              });
              return;
            }
            //相册不得超过9张
            if (oldPhotos.length + photos.length > 9) {
              Toast.show({
                type: "error",
                text1: "相册最多只能上传9张照片哦！",
                topOffset: 60,
              });
              return;
            }
            setIsSubmitting(true);
            const account = await get("account");
            const cover = displayImage[0].notChanged
              ? displayImage[0].id
              : await multiUpload(displayImage);
            const shorts = displayVideo[0].notChanged
              ? displayVideo[0].id
              : await multiUpload(displayVideo);
            const newPhotosIds = await multiUpload(photos);
            const oldPhotosIds = oldPhotos.map((item) => item.id);
            const album = {
              image_ids: [...oldPhotosIds, ...newPhotosIds?.image_ids],
            };
            if (
              !cover.image_ids.length ||
              !shorts.video_ids.length ||
              !album.image_ids.length
            ) {
              Toast.show({
                type: "error",
                text1: "上传失败，请联系客服进行上传",
                topOffset: 60,
              });
              setIsSubmitting(false);
              return;
            }

            //获取环境变量
            const apiUrl = process.env.EXPO_PUBLIC_API_URL;

            //上传表单
            const base = await baseRequest();
            const signature = await generateSignature({
              mid: account?.mid,
              cover: cover,
              shorts: shorts,
              album: album,
              ...base,
            });
            try {
              const response = await fetch(
                `${apiUrl}/api/streamer/update?signature=${signature}`,
                {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                  },
                  body: JSON.stringify({
                    mid: account?.mid,
                    cover: cover,
                    shorts: shorts,
                    album: album,
                    ...base,
                  }),
                }
              );
              const streamerData = await response.json();
              if (streamerData.ret === -1) {
                Toast.show({
                  type: "error",
                  text1: streamerData.msg,
                  topOffset: 60,
                });
                return;
              }
              //提交成功后弹窗提示并返回上级
              Toast.show({
                type: "info",
                text1: "提交成功，等耐心等待审核",
                topOffset: 60,
              });
              navigation.goBack();
            } catch (error) {
              console.error(error);
            } finally {
              setIsSubmitting(false);
            }
          }}
        >
          {({ handleSubmit }) => (
            <>
              <Text style={tailwind("text-sm text-[#F53030] font-medium")}>
                将展示在“推荐”、“主页”、“空间”，请认真完善
              </Text>
              <View style={tailwind("my-2 bg-[#FFFFFF1A] p-2 rounded-2xl")}>
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    封面图
                  </Text>
                  <TouchableOpacity
                    onPress={() => pickDisPlayImage()}
                    style={tailwind("flex-row items-center")}
                  >
                    {displayImage.length !== 0 ? (
                      <Image
                        style={tailwind("w-12 h-12 rounded-lg")}
                        source={displayImage[0].uri}
                        placeholder={blurhash}
                        contentFit="cover"
                        transition={1000}
                        cachePolicy="disk"
                      />
                    ) : (
                      <Text
                        style={tailwind("text-xs text-[#FFFFFF80] font-medium")}
                      >
                        请尽量选择横屏照片
                      </Text>
                    )}
                    <Icon
                      name="chevron-forward-outline"
                      type="ionicon"
                      color="white"
                    />
                  </TouchableOpacity>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    展示视频
                  </Text>
                  <TouchableOpacity
                    onPress={() => pickDisPlayVideo()}
                    style={tailwind("flex-row items-center")}
                  >
                    {displayVideo.length !== 0 ? (
                      <Image
                        style={tailwind("w-12 h-16 rounded-lg")}
                        source={displayVideo[0].cover}
                        placeholder={blurhash}
                        contentFit="cover"
                        transition={1000}
                        cachePolicy="disk"
                      />
                    ) : (
                      <Text
                        style={tailwind("text-xs text-[#FFFFFF80] font-medium")}
                      >
                        请选择60秒内短视频
                      </Text>
                    )}
                    <Icon
                      name="chevron-forward-outline"
                      type="ionicon"
                      color="white"
                    />
                  </TouchableOpacity>
                </View>
                <Divider style={tailwind("my-2")} />
                <View>
                  <View
                    style={tailwind("flex-row justify-between items-center")}
                  >
                    <Text style={tailwind("text-base text-white font-medium")}>
                      <Text style={tailwind("text-[#F53030]")}>*</Text>
                      相册
                    </Text>
                    <Text
                      style={tailwind("text-xs text-[#FFFFFF80] font-medium")}
                    >
                      请上传2～9张照片
                    </Text>
                  </View>
                  <MediaGrid
                    setDragging={setDragging}
                    assets={oldPhotos}
                    setAssets={setOldPhotos}
                  />
                  <MediaPicker
                    setDragging={setDragging}
                    maxCount={9}
                    type="image"
                    setAssets={setPhotos}
                  />
                </View>
              </View>
              <Button
                color="#FF669E"
                radius="999"
                size="md"
                disabled={isSubmitting}
                disabledStyle={tailwind("bg-[#FFFFFF80]")}
                disabledTitleStyle={tailwind("text-white")}
                onPress={(e) => {
                  handleSubmit(e);
                }}
                titleStyle={tailwind("text-base")}
                containerStyle={{
                  marginBottom: insets.bottom + 60,
                  ...tailwind("mt-4"),
                }}
              >
                {isSubmitting && (
                  <ActivityIndicator size="small" color="white" />
                )}
                {isSubmitting ? "正在提交..." : "确认修改"}
              </Button>
            </>
          )}
        </Formik>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}