@utogether/udp-core 1.0.0 → 1.0.1-beta.1

package/src/views/components/cropping/index.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { ref, nextTick, getCurrentInstance } from 'vue';
-import Cropper from '@/components/ReCropper';
-import img from './picture.jpeg';
-
-let info = ref<object>(null);
-let cropperImg = ref<string>('');
-const instance = getCurrentInstance();
-
-const onCropper = (): void => {
-  nextTick(() => {
-    // @ts-expect-error
-    instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
-      let fileReader: FileReader = new FileReader();
-      fileReader.onloadend = (e: ProgressEvent) => {
-        // @ts-ignore
-        cropperImg.value = e.target.result;
-        // @ts-expect-error
-        info.value = instance.refs.refCropper.cropper.getData();
-      };
-      fileReader.readAsDataURL(blob);
-    }, 'image/jpeg');
-  });
-};
-</script>
-
-<template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">图片裁剪组件</span>
-      </div>
-    </template>
-    <div class="cropper-container">
-      <Cropper ref="refCropper" :width="'40vw'" :src="img" />
-      <img v-if="cropperImg" :src="cropperImg" class="croppered" />
-    </div>
-    <el-button type="primary" @click="onCropper">裁剪</el-button>
-    <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
-  </el-card>
-</template>
-
-<style scoped>
-.cropper-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.el-button {
-  margin-top: 10px;
-}
-
-.croppered {
-  display: block;
-  width: 45%;
-  height: 360px;
-}
-</style>

package/src/views/components/split-pane/index.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import splitpane, { ContextProps } from '@/components/ReSplitPane';
-import { reactive } from 'vue';
-
-const settingLR: ContextProps = reactive({
-  minPercent: 20,
-  defaultPercent: 40,
-  split: 'vertical'
-});
-
-const settingTB: ContextProps = reactive({
-  minPercent: 20,
-  defaultPercent: 40,
-  split: 'horizontal'
-});
-</script>
-
-<template>
-  <el-card>
-    <!-- <template #header>
-      <div class="card-header">
-        <span class="font-medium">切割面板组件</span>
-      </div>
-    </template> -->
-    <div class="split-pane">
-      <splitpane :split-set="settingLR">
-        <!-- #paneL 表示指定该组件为左侧面板 -->
-        <template #paneL>
-          <!-- 自定义左侧面板的内容 -->
-          <div class="dv-a">A</div>
-        </template>
-        <!-- #paneR 表示指定该组件为右侧面板 -->
-        <template #paneR>
-          <!-- 再次将右侧面板进行拆分 -->
-          <splitpane :split-set="settingTB">
-            <template #paneL>
-              <div class="dv-b">B</div>
-            </template>
-            <template #paneR>
-              <div class="dv-c">C</div>
-            </template>
-          </splitpane>
-        </template>
-      </splitpane>
-    </div>
-  </el-card>
-</template>
-
-<style lang="scss" scoped>
-$W: 100%;
-$H: 70vh;
-
-.split-pane {
-  width: $W;
-  height: $H;
-  font-size: 50px;
-  color: #fff;
-  text-align: center;
-
-  .dv-a,
-  .dv-b,
-  .dv-c {
-    width: $W;
-    height: $W;
-    line-height: $H;
-    background: rgba($color: dodgerblue, $alpha: 80%);
-  }
-
-  .dv-b,
-  .dv-c {
-    line-height: 250px;
-  }
-
-  .dv-b {
-    background: rgba($color: #000, $alpha: 80%);
-  }
-
-  .dv-c {
-    background: rgba($color: #ce272d, $alpha: 80%);
-  }
-}
-</style>

package/src/views/components/video/index.vue

@@ -1,57 +0,0 @@
-<!--
- * @Author: wei.li
- * @Date: 2022-03-04 18:18:51
- * @LastEditors: wei.li
- * @LastEditTime: 2022-09-06 14:45:11
- * @Description: file content
--->
-<script setup lang="ts">
-// import { onMounted } from 'vue';
-// import Player from 'xgplayer/dist/simple_player';
-// import volume from 'xgplayer/es/controls/volume';
-// import screenShot from 'xgplayer/es/controls/screenShot';
-// import { deviceDetection } from '@utogether/utils';
-// import playbackRate from 'xgplayer/es/controls/playbackRate';
-import { useRenderIcon } from '@/components/ReIcon/src/hooks';
-
-// onMounted(() => {
-//   new Player({
-//     id: 'mse',
-//     // 默认静音
-//     volume: 0,
-//     autoplay: false,
-//     screenShot: true,
-//     url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
-//     poster: 'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
-//     fluid: deviceDetection(),
-//     controlPlugins: [volume, playbackRate, screenShot],
-//     //传入倍速可选数组
-//     playbackRate: [0.5, 0.75, 1, 1.5, 2]
-//   });
-// });
-</script>
-
-<template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium"
-          >视频组件，采用开源的<el-link
-            href="https://v2.h5player.bytedance.com"
-            target="_blank"
-            :icon="useRenderIcon('video-play')"
-            style="margin: 0 4px 5px; font-size: 16px"
-            >西瓜播放器</el-link
-          ></span
-        >
-      </div>
-    </template>
-    <div id="mse" />
-  </el-card>
-</template>
-
-<style scoped>
-#mse {
-  flex: auto;
-}
-</style>