lzc-video-player 0.0.0

package/src/components/PlayList/index.vue

@@ -0,0 +1,521 @@
+<script lang="ts" setup>
+import {
+  ref,
+  onMounted,
+  nextTick,
+  type Ref,
+  watchEffect,
+  computed,
+  onUnmounted,
+} from "vue"
+import { useHistoryInfo } from "@/stores/playlist"
+import type { VideoInfo } from "@/model"
+import { getFrame } from "@/use/useVideoFrame"
+import {
+  formatTime,
+  remHeight,
+} from "@/components/Video/components/useLzcCommon"
+import type { QList } from "quasar"
+import Spectrum from "@/components/Spectrum/index.vue"
+import EmptySvg from "@/icons/暂无.svg?inline"
+import useMultipleEdit from "@/use/useMultipleEdit"
+import MultipleEditChoose from "@/components/MultipleEdit/choose.vue"
+import DialogConfirm from "@/components/Dialog/index.vue"
+import { useQuasar } from "quasar"
+import { t } from "@/i18n"
+import type { LzcPlayer } from "@/components/Video/player"
+
+const props = defineProps<{
+  player?: LzcPlayer
+  isPlaying: (info: VideoInfo) => boolean
+}>()
+const emit = defineEmits<{
+  (event: "openVideo", info: VideoInfo): void
+  (event: "back"): void
+}>()
+
+const store = useHistoryInfo()
+const currentPlaytime = ref(props.player ? props.player.currentTime() : 0)
+const updateCurrentPlaytimeHook = () => {
+  currentPlaytime.value = props.player!.currentTime()
+}
+
+const $q = useQuasar()
+
+const namespace = "page-title-edit"
+const {
+  selectedKeys,
+  isEditing,
+  isSelectAll,
+  hdlSelectAll,
+  hdlCancel,
+  hdlToggleItem,
+  updateData,
+} = useMultipleEdit()
+const qlist: Ref<QList | null> = ref(null)
+const hasData = computed(() => !!store.infos.length)
+
+const imgUrl = (info: VideoInfo): string => {
+  if (info._id) {
+    return getFrame(info._id)
+  }
+  return EmptySvg
+}
+
+function triggerOpen(info: VideoInfo) {
+  if (isEditing.value) {
+    hdlToggleItem(info._id)
+    return
+  }
+  emit("openVideo", info)
+}
+
+function watched(info: VideoInfo): string {
+  if (!info.duration || info.duration == 0) {
+    return "0"
+  }
+  if (!info.currentTime || info.currentTime == 0) {
+    return "0"
+  }
+  return ((info.currentTime / info.duration) * 100).toFixed(0)
+}
+
+function subTitle(info: VideoInfo): string {
+  if (!info.invalid && props.isPlaying(info) && props.player) {
+    const ft = formatTime(currentPlaytime.value!)
+    return t("src.components.play_list.index.watching", "正在观看：{{ft}}", {
+      ft,
+    })
+  }
+  return t("src.components.play_list.index.watch_to", "观看至: {{info}}%", {
+    info: watched(info),
+  })
+}
+
+// 确认删除
+function hdlConfirm() {
+  store.batchDeleteHistory(selectedKeys.value)
+
+  const currentPlayingInfo = store.infos.find(props.isPlaying)
+
+  if (
+    currentPlayingInfo &&
+    selectedKeys.value.includes(currentPlayingInfo._id)
+  ) {
+    emit("back")
+  }
+
+  hdlCancel()
+}
+
+function hdlDelete() {
+  if (!selectedKeys.value.length) return
+
+  const openDeleteDialog = () => {
+    $q.dialog({
+      component: DialogConfirm,
+      componentProps: {
+        title: t("src.components.play_list.index.delete_title", "确认删除"),
+        desc: t(
+          "src.components.play_list.index.delete_desc",
+          "是否删除已选中的播放记录？",
+        ),
+        confirm: hdlConfirm,
+      },
+    })
+  }
+
+  if (!props.player) {
+    emit("back")
+    window.setTimeout(openDeleteDialog, 0)
+    return
+  }
+
+  openDeleteDialog()
+}
+
+const deleteClass = computed(() => {
+  return `${namespace}-delete ${
+    selectedKeys.value?.length && namespace + "-delete-active"
+  }`
+})
+
+onMounted(() => {
+  const index = store.infos.findIndex(props.isPlaying)
+  if (index > -1) {
+    nextTick(() => {
+      if (qlist.value) {
+        qlist.value.$el.scrollBy(0, remHeight(9.4) * index)
+      }
+    })
+  }
+  if (props.player) {
+    props.player.on("timeupdate", updateCurrentPlaytimeHook)
+  }
+})
+
+onUnmounted(() => {
+  if (props.player) {
+    props.player.off("timeupdate", updateCurrentPlaytimeHook)
+  }
+})
+
+// 更新数据
+watchEffect(() => {
+  const ids = store.infos.map((v) => v._id)
+
+  updateData(ids)
+})
+</script>
+
+<template>
+  <div class="list" @click.stop>
+    <div class="list-top-bar">
+      <div v-if="isEditing" class="title cancel-edit" @click.stop="hdlCancel">
+        <q-icon name="svguse:#icon-关闭多选.svg" />
+        <span class="cancel-edit-text">{{
+          t("src.components.play_list.index.select", "请选择")
+        }}</span>
+      </div>
+      <span class="title" v-else>{{
+        t("src.components.play_list.index.play_list", "播放列表")
+      }}</span>
+      <div class="clear">
+        <div v-if="hasData">
+          <span
+            :class="`${namespace}-edit`"
+            @click="isEditing = true"
+            v-if="!isEditing"
+          >
+            {{ t("src.components.play_list.index.edit", "编辑") }}
+          </span>
+          <span :class="`${namespace}-select`" @click="hdlSelectAll" v-else>
+            {{
+              isSelectAll
+                ? t(
+                    "src.components.play_list.index.cancel_select_all",
+                    "取消全选",
+                  )
+                : t("src.components.play_list.index.select_all", "全选")
+            }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <q-list
+      :class="`list-items ${isEditing ? 'list-editing' : ''}`"
+      ref="qlist"
+    >
+      <template v-if="store.infos.length > 0">
+        <div
+          v-for="info in store.infos"
+          :key="info.sourceUrl"
+          @click="triggerOpen(info)"
+          class="info-item"
+          :class="{ active: isPlaying(info) }"
+        >
+          <div class="item">
+            <div class="item-pic">
+              <q-img fit="cover" loading="eager" :src="imgUrl(info)" no-spinner>
+                <div
+                  class="absolute-bottom-right text-subtitle2 item-subtitle"
+                  :class="{ 'item-invalid': info.invalid }"
+                >
+                  <template v-if="info.invalid">
+                    <q-icon name="svguse:#icon-失效.svg"></q-icon>
+                    {{ t("src.components.play_list.index.expired", "已失效") }}
+                  </template>
+                  <template v-else>
+                    {{ formatTime(info.duration) }}
+                  </template>
+                </div>
+              </q-img>
+            </div>
+            <div class="item-info">
+              <div class="item-info-title">
+                {{ info.name || info.sourceUrl }}
+              </div>
+              <div class="item-info-subtitle">
+                <Spectrum v-if="!info.invalid && isPlaying(info)"></Spectrum>
+                {{ subTitle(info) }}
+              </div>
+            </div>
+            <div>
+              <MultipleEditChoose
+                :keyValue="info._id"
+                :selectedKeys="selectedKeys"
+                v-if="isEditing"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+      <div v-else class="empty-text">
+        <span>{{
+          t(
+            "src.components.play_list.index.no_available_content",
+            "暂无播放内容",
+          )
+        }}</span>
+      </div>
+    </q-list>
+
+    <div :class="deleteClass" @click="hdlDelete" v-if="isEditing">
+      {{
+        t(
+          "src.components.play_list.index.button_delete",
+          "删除\{\{selectedKeys\}\}",
+          {
+            selectedKeys:
+              selectedKeys.length > 0 ? `（${selectedKeys.length}）` : "",
+          },
+        )
+      }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$editing-delete-height: 5.6rem;
+
+@mixin default-text() {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 2rem;
+}
+
+@mixin subtitle-text() {
+  font-size: 1.1rem;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 1.6rem;
+}
+
+@mixin opacity-linear-gradient() {
+  -webkit-mask-image: linear-gradient(
+    270deg,
+    rgba(0, 0, 0, 0.3) 0%,
+    rgba(0, 0, 0, 0.5) 78%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+.list {
+  width: 300px;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 4px;
+  z-index: 2;
+  position: relative;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.list:not(.modal-list) {
+  padding-top: var(--lzc-safe-area-inset-top);
+  padding-bottom: var(--lzc-safe-area-inset-bottom);
+}
+
+.list-top-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 16px 20px;
+
+  .title {
+    font-size: 1.6rem;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 2.2rem;
+  }
+
+  .clear {
+    @include default-text;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.modal-list .list-items {
+  max-height: 400px;
+  @media (orientation: landscape) and (height < 600px)  {
+    max-height: 200px;
+  }
+}
+
+.list-items {
+  overflow-y: auto;
+
+  .info-item {
+    padding-left: 10px;
+    background: none;
+    cursor: pointer;
+
+    &.active {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .item {
+    margin: 1.2rem 0px;
+    height: 7rem;
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+
+    .item-pic {
+      flex-shrink: 0;
+      width: 10.5rem;
+      height: 7rem;
+      margin-right: 12px;
+      background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.1) 0%,
+        rgba(255, 255, 255, 0.1) 100%
+      );
+      border-radius: 0.4rem;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      overflow: hidden;
+
+      > .q-img {
+        height: 100%;
+        background-image: v-bind('"url(" + EmptySvg + ")"');
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+
+    .item-subtitle {
+      padding: 0px 0.4rem;
+      margin-right: 0.3rem;
+      margin-bottom: 0.3rem;
+
+      height: 1.4rem;
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.4rem;
+      color: #ffffff;
+
+      display: flex;
+      align-items: center;
+      background-color: transparent;
+      text-shadow: 0px 1px 3px rgba(61, 61, 61, 0.5);
+    }
+
+    .item-invalid {
+      border-radius: 0.2rem;
+
+      > .q-icon {
+        margin-right: 0.3rem;
+      }
+    }
+
+    .item-info {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      .item-info-title {
+        margin: 1.4rem 1rem 1.4rem 0px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        @include default-text;
+      }
+
+      .item-info-subtitle {
+        display: inline-flex;
+        align-items: baseline;
+        margin-bottom: 0.5rem;
+        @include subtitle-text;
+      }
+    }
+  }
+}
+
+.empty-text {
+  color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 40px 0;
+  font-size: 12px;
+}
+
+.cancel-edit {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  .cancel-edit-text {
+    line-height: 2.2rem;
+  }
+
+  :deep(.q-icon) {
+    font-size: 1.2rem;
+    margin-right: 1.2rem;
+  }
+}
+
+.list-editing {
+  margin-bottom: $editing-delete-height;
+}
+
+.page-title-edit {
+  &-cancel {
+    position: absolute;
+    left: 2rem;
+    font-size: 1.4rem;
+    color: #333333;
+    line-height: 2.5rem;
+    cursor: pointer;
+  }
+
+  &-edit {
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    padding-right: 0.4rem;
+  }
+
+  &-select {
+    color: #5f86ff;
+    cursor: pointer;
+    padding-right: 0.4rem;
+  }
+
+  &-delete {
+    display: flex;
+    background: transparent;
+    justify-content: center;
+    font-size: 1.4rem;
+    color: rgba(255, 255, 255, 0.4);
+    line-height: 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1.1rem 0;
+    font-weight: 500;
+    cursor: not-allowed;
+    height: $editing-delete-height;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 1;
+
+    &-active {
+      cursor: pointer;
+      color: #e35244;
+    }
+  }
+}
+</style>

package/src/components/Spectrum/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <ul>
+      <li class="m1"></li>
+      <li class="m2"></li>
+      <li class="m3"></li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+div {
+  margin-right: 0.4rem;
+}
+ul {
+  vertical-align: baseline;
+  font-size: 0;
+  margin: 0;
+  padding: 0;
+  height: 1.1rem;
+}
+ul li {
+  background-color: rgba(31, 193, 205, 1);
+  display: inline-block;
+  width: 0.15rem;
+  height: 1rem;
+}
+li + li {
+  margin-left: 0.2rem;
+}
+
+.m1 {
+  animation: 0.8s 0.1s living linear infinite backwards normal;
+  animation-delay: -1.1s;
+}
+.m2 {
+  animation: 0.8s 0.3s living linear infinite backwards normal;
+  animation-delay: -1.3s;
+}
+.m3 {
+  animation: 0.8s 0.6s living linear infinite backwards normal;
+  animation-delay: -1.6s;
+}
+@keyframes living {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 0 1.1rem;
+  }
+  50% {
+    transform: scaleY(0.3);
+    transform-origin: 0 1.1rem;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: 0 1.1rem;
+  }
+}
+</style>