classroom-app/src/views/creation/index-share.tsx

import {
  defineComponent,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch
} from 'vue';
// import WaveSurfer from 'wavesurfer.js';
// import Regions from 'wavesurfer.js/dist/plugins/regions.js';
import styles from './index.module.less';
import { Cell, Image, List, Popup, Slider, showDialog } from 'vant';
import iconMember from './images/icon-member.png';
import iconZan from './images/icon-zan.png';
import iconZanActive from './images/icon-zan-active.png';
import iconZ from './images/icon-z.png';
import iconPlay from './images/icon-play.png';
import iconPause from './images/icon-pause.png';
import { browser, getGradeCh, getSecondRPM } from '@/helpers/utils';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import {
  api_openUserMusicDetail,
  api_openUserMusicPage,
  api_userMusicStar,
  api_verification
} from './api';
import MEmpty from '@/components/m-empty';
import { nextTick } from 'process';
import MVideo from '@/components/m-video';
import LoginModel from './login-model';
import { removeAuth } from '../student-register/layout/utils';
import { setLogout } from '@/state';
import { storage } from '@/helpers/storage';
import { ACCESS_TOKEN } from '@/store/mutation-types';
import MWxTip from '@/components/m-wx-tip';
import { usePageVisibility } from '@vant/use';
import videoBg from './images/video-bg.png';

export default defineComponent({
  name: 'creation-detail',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const audioId = 'a' + +Date.now() + Math.floor(Math.random() * 100);

    const state = reactive({
      id: route.query.id,
      loginTag: false, // 是否登录标识
      loginStatus: false,
      playType: '' as 'Audio' | 'Video' | '', // 播放类型
      musicDetail: {} as any,
      timer: null as any,
      paused: true,
      audioWidth: 0,
      currentTime: 0,
      duration: 0.1,
      loop: false,
      dragStatus: false, // 是否开始拖动
      isClick: false,
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false
      },
      params: {
        page: 1,
        rows: 20
      },
      messageStatus: false,
      message: ''
    });
    const wavesurfer = ref();
    // window.AudioContext = window.AudioContext || window.webkitAudioContext;
    const audioDom = new Audio();
    audioDom.controls = true;
    audioDom.style.width = '100%';
    audioDom.className = styles.audio;

    /** 改变播放时间 */
    const handleChangeTime = (val: number) => {
      state.currentTime = val;
      clearTimeout(state.timer);
      state.timer = setTimeout(() => {
        audioDom.currentTime = val;
        state.timer = null;
      }, 60);
    };

    // 切换音频播放
    const onToggleAudio = (e: any) => {
      e.stopPropagation();
      if (audioDom.paused) {
        audioDom.play();
      } else {
        audioDom.pause();
      }

      state.paused = audioDom.paused;
    };

    // 点赞
    const onStarChange = async () => {
      // 是否登录
      if (!state.loginTag) {
        state.loginStatus = true;
        return;
      }
      try {
        await api_userMusicStar({
          userMusicId: state.id,
          star: !state.musicDetail.starFlag
        });

        state.musicDetail.starFlag = !state.musicDetail.starFlag;
        if (state.musicDetail.starFlag) {
          state.musicDetail.likeNum += 1;
        } else {
          state.musicDetail.likeNum -= 1;
        }
      } catch {
        //
      }
    };

    // 获取列表
    const getList = async () => {
      try {
        if (state.isClick) return;
        state.isClick = true;
        const res = await api_openUserMusicPage({
          type: 'FORMAL',
          exclusionId: state.id,
          sort: 1,
          ...state.params
        });
        state.listState.loading = false;
        const result = res.data || {};
        // 处理重复请求数据
        if (state.list.length > 0 && result.current === 1) {
          return;
        }
        state.list = state.list.concat(result.rows || []);
        state.listState.finished = result.current >= result.pages;
        state.params.page = result.current + 1;
        state.listState.dataShow = state.list.length > 0;
        state.isClick = false;
      } catch {
        state.listState.dataShow = false;
        state.listState.finished = true;
        state.isClick = false;
      }
    };

    const onDetail = (item: any) => {
      router.push({
        path: '/shareCreation',
        query: {
          id: item.id
        }
      });
    };

    const initAudio = () => {
      try {
        audioDom.src = state.musicDetail.videoUrl;
        audioDom.load();
        audioDom.oncanplaythrough = () => {
          state.paused = audioDom.paused;
          state.duration = audioDom.duration;
        };
        // 播放时监听
        audioDom.addEventListener('timeupdate', () => {
          state.duration = audioDom.duration;
          state.currentTime = audioDom.currentTime;
          const rate = (state.currentTime / state.duration) * 100;
          state.audioWidth = rate > 100 ? 100 : rate;
        });
        audioDom.addEventListener('ended', () => {
          state.paused = audioDom.paused;
        });
        // wavesurfer.value = WaveSurfer.create({
        //   container: document.querySelector(`#${audioId}`) as HTMLElement,
        //   waveColor: '#fff',
        //   progressColor: '#2FA1FD',
        //   url: state.musicDetail.videoUrl,
        //   cursorWidth: 0,
        //   height: 35,
        //   width: 'auto',
        //   normalize: true,
        //   // Set a bar width
        //   barWidth: 2,
        //   // Optionally, specify the spacing between bars
        //   barGap: 2,
        //   // And the bar radius
        //   barRadius: 4,
        //   barHeight: 1.2,
        //   /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
        //   // autoCenter: true,
        //   hideScrollbar: false,
        //   media: audioDom
        // });
        // // console.log(wavesurfer.value);

        // // const wsRegions = wavesurfer.value.registerPlugin(Regions.create());
        // wavesurfer.value.once('interaction', () => {
        //   // wavesurfer.value.play();
        // });
        // wavesurfer.value.once('ready', () => {
        //   state.paused = audioDom.paused;
        //   state.duration = audioDom.duration;
        // });

        // wavesurfer.value.on('finish', () => {
        //   state.paused = true;
        // });
      } catch (e) {
        //
        console.log(e);
      }
    };

    const __init = async () => {
      try {
        // 判断是否登录
        const Authorization = storage.get(ACCESS_TOKEN) || '';
        if (Authorization) {
          const res = await api_verification({
            token: Authorization
          });
          state.loginTag = res.data;
          if (!res.data) {
            removeAuth();
            setLogout();
          }
        }

        const res = await api_openUserMusicDetail(state.id);

        if (res.code === 999) {
          state.message = res.message;
          state.messageStatus = true;
          return;
        } else {
          state.musicDetail = res.data;
          getList();
          // 判断是视频还是音频

          if (res.data.videoUrl.lastIndexOf('mp4') !== -1) {
            state.playType = 'Video';
          } else {
            state.playType = 'Audio';
            // 初始化
            nextTick(() => {
              initAudio();
            });
          }
        }
      } catch (err) {
        //
        state.listState.dataShow = false;
      }
    };

    const pageVisibility = usePageVisibility();
    watch(pageVisibility, value => {
      console.log(value);
      if (value === 'hidden') {
        if (audioDom) {
          audioDom.pause();
          state.paused = audioDom.paused;
        }
      }
    });
    onMounted(async () => {
      __init();
    });

    onUnmounted(() => {
      if (audioDom) {
        audioDom.pause();
        state.paused = audioDom.paused;
      }
    });

    onBeforeRouteUpdate((to: any) => {
      state.id = to.query.id;
      state.playType = '';
      state.params.page = 1;
      if (audioDom) {
        audioDom.currentTime = 0;
        audioDom.pause();
        state.paused = audioDom.paused;
      }
      state.list = [];
      __init();
    });
    return () => (
      <div
        class={[
          styles.creation,
          browser().isTablet ? styles.creationTablet : ''
        ]}>
        {/* <video
          src={state.musicDetail.videoUrl}
          style="width: 100%;height: 200px"
          controls></video> */}
        <div class={styles.playSection}>
          {state.playType === 'Video' && (
            <MVideo
              class={styles.videoSection}
              src={state.musicDetail.videoUrl}
              poster={state.musicDetail?.videoImg || videoBg}
            />
          )}
          {state.playType === 'Audio' && (
            <div class={styles.audioSection}>
              <div class={styles.audioContainer}>
                {/* <div
                  id={audioId}
                  onClick={(e: MouseEvent) => {
                    e.stopPropagation();
                  }}></div> */}
                <div
                  class={styles.waveActive}
                  style={{
                    width: state.audioWidth + '%'
                  }}></div>
                <div class={styles.waveDefault}></div>
              </div>

              <div class={styles.audioBox}>
                <div
                  class={[styles.audioPan, state.paused && styles.imgRotate]}>
                  <Image class={styles.audioImg} src={state.musicDetail?.img} />
                </div>
                <i class={styles.audioPoint}></i>
                <i
                  class={[styles.audioZhen, state.paused && styles.active]}></i>
              </div>
              <div
                class={[styles.controls]}
                onClick={(e: Event) => {
                  e.stopPropagation();
                }}
                onTouchmove={(e: TouchEvent) => {
                  // emit('close');
                }}>
                <div class={styles.actions}>
                  <div class={styles.actionBtn} onClick={onToggleAudio}>
                    <img src={state.paused ? iconPlay : iconPause} />
                  </div>
                </div>
                <div class={[styles.slider]}>
                  <Slider
                    step={0.01}
                    class={styles.timeProgress}
                    v-model={state.currentTime}
                    max={state.duration}
                    onUpdate:modelValue={val => {
                      handleChangeTime(val);
                    }}
                    onDragStart={() => {
                      state.dragStatus = true;
                      console.log('onDragStart');
                    }}
                    onDragEnd={() => {
                      state.dragStatus = false;
                      console.log('onDragEnd');
                    }}
                  />
                </div>
                <div class={styles.time}>
                  <div>{getSecondRPM(state.currentTime)}</div>
                  <span>/</span>
                  <div>{getSecondRPM(state.duration)}</div>
                </div>
              </div>
            </div>
          )}
        </div>

        <Cell class={styles.userSection} center border={false}>
          {{
            icon: () => (
              <Image class={styles.userLogo} src={state.musicDetail.avatar} />
            ),
            title: () => (
              <div class={styles.userInfo}>
                <p class={styles.name}>
                  <span>{state.musicDetail.username}</span>
                  {state.musicDetail.vipFlag && (
                    <img src={iconMember} class={styles.iconMember} />
                  )}
                </p>
                <p class={styles.sub}>
                  {state.musicDetail.subjectName}{' '}
                  {getGradeCh(state.musicDetail.currentGradeNum - 1)}
                </p>
              </div>
            ),
            value: () => (
              <div
                class={[
                  styles.zan,
                  state.musicDetail.starFlag && styles.zanActive
                ]}
                onClick={onStarChange}>
                <img
                  src={state.musicDetail.starFlag ? iconZanActive : iconZan}
                  class={styles.iconZan}
                />
                {state.musicDetail.likeNum}
              </div>
            )
          }}
        </Cell>

        <div class={styles.musicSection}>
          <div class={styles.musicName}>
            <span class={styles.musicTag}>曲目名称</span>
            {state.musicDetail?.musicSheetName}
          </div>
          {state.musicDetail?.desc && (
            <div class={styles.musicDesc}>{state.musicDetail?.desc}</div>
          )}
        </div>

        <div class={styles.likeSection}>
          <div class={styles.likeTitle}>推荐作品</div>

          {state.listState.dataShow ? (
            <List
              finished={state.listState.finished}
              finishedText=" "
              class={[styles.container, styles.containerInformation]}
              onLoad={getList}
              immediateCheck={false}>
              <div class={styles.cellGroup}>
                {[1, 2, 3, 4, , 5, 6, 7, 889, 9, 9, 5, 4, , 3, 3, 2, 2].map(
                  () => (
                    <>
                      {state.list.map((item: any) => (
                        <div class={styles.cell} onClick={() => onDetail(item)}>
                          <div class={styles.cellImg}>
                            <Image
                              class={styles.cellImage}
                              src={item.img}
                              fit="cover"
                            />

                            <div class={styles.iconZan}>{item.likeNum}</div>
                          </div>
                          <div class={[styles.cellTitle, 'van-ellipsis']}>
                            {item.musicSheetName}
                          </div>
                          <div class={styles.users}>
                            <Image src={item.avatar} class={styles.userImg} />
                            <span class={styles.name}>{item.username}</span>
                          </div>
                        </div>
                      ))}
                    </>
                  )
                )}
              </div>
            </List>
          ) : (
            <MEmpty description="暂无数据" />
          )}
        </div>

        <Popup
          v-model:show={state.loginStatus}
          style={{ background: 'transparent', overflow: 'inherit' }}>
          <LoginModel
            isRegister
            onClose={() => (state.loginStatus = false)}
            onConfirm={async (val: boolean) => {
              state.loginTag = val;
              state.loginStatus = false;
              const { data } = await api_openUserMusicDetail(state.id);
              state.musicDetail = data;
            }}
          />
        </Popup>

        <MWxTip
          v-model:show={state.messageStatus}
          message={state.message}
          showButton={false}
        />
      </div>
    );
  }
});