conf

.eslintrc.js

@@ -43,6 +43,7 @@ module.exports = {
     ],
     'comma-dangle': ['error', 'never'],
     quotes: ['error', 'single'],
+    semi: ['error', 'always'],
     'vue/html-indent': [
       'error',
       2,

src/App.vue

@@ -7,46 +7,47 @@
       <right-panel></right-panel>
     </body>
     <modal-layer></modal-layer>
+    <uploader></uploader>
   </div>
 </template>
 
 <script>
-import CommonHeader from '@/components/header/index.vue'
-import ModalLayer from '@/components/modal/modalLayer.vue'
+import CommonHeader from '@/components/header/index.vue';
 export default {
   components: {
     CommonHeader,
-    ModalLayer,
     SideNav: () => import('@/components/sideNav/index.vue'),
-    RightPanel: () => import('@/components/rightPanel/index.vue')
+    RightPanel: () => import('@/components/rightPanel/index.vue'),
+    ModalLayer: () => import('@/components/modal/modalLayer.vue'),
+    Uploader: () => import('@/components/misc/uploader.vue')
   },
   data() {
-    return {}
+    return {};
   },
   async created() {
-    let result = await this.$http.get('/webapi/home/banner?type=1&category=18')
-    console.log('result:', result)
+    let result = await this.$http.get('/webapi/home/banner?type=1&category=18');
+    console.log('result:', result);
   }
-}
+};
 </script>
 
 <style lang="scss">
 #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    position: relative;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
 }
 
 .body-container {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    overflow: hidden;
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
 }
 </style>

src/components/header/index.vue

@@ -20,26 +20,26 @@ export default {
     tipPanel: () => import('@/components/header/tipPanel.vue')
   },
   data() {
-    return {}
+    return {};
   },
   created() {},
   mounted() {},
   methods: {
     showModal() {
-      this.$modal.show('selectModal')
+      this.$modal.show('selectModal');
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
 /* @import url(); 引入css类 */
 .comp-commonheader {
-    width: 100%;
-    height: 100px;
-    border: 1px solid pink;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
+  width: 100%;
+  height: 100px;
+  border: 1px solid pink;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
 </style>

src/components/header/tipPanel.vue

@@ -7,11 +7,11 @@
 <script>
 export default {
   data() {
-    return {}
+    return {};
   },
   created() {},
   mounted() {}
-}
+};
 </script>
 
 <style scoped lang="scss">

src/components/misc/tutorialContent.vue

@@ -5,10 +5,10 @@
 <script>
 export default {
   data() {
-    return {}
+    return {};
   },
   methods: {}
-}
+};
 </script>
 
 <style lang="scss" scoped></style>

src/components/misc/uploader.vue

+<template>
+  <div>
+    <input
+      id="video-input"
+      ref="videoInput"
+      type="file"
+      accept="video/mp4, video/NMP4"
+      @change="onVideoInputChange"
+      @click="onInputClick"
+    >
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+export default {
+  data() {
+    return {
+      videoInput: {}
+    };
+  },
+  mounted() {
+    this.videoInput = this.$refs.videoInput;
+  },
+  methods: {
+    ...mapActions({
+      upload: 'uploader/upload'
+    }),
+    onVideoInputChange() {
+      let file = this.videoInput.files[0];
+      console.log('turbo: onVideoInputChange -> file', file);
+    },
+    onInputClick() {
+      const vm = this;
+      window.addEventListener('focus', function h() {
+        vm.clearInputValue(vm.videoInput);
+        console.log('turbo: h -> this.videoInput', vm.videoInput);
+        window.removeEventListener('focus', h);
+      });
+    },
+    clearInputValue(el) {
+      if (el) {
+        el.value = '';
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/modal/completeContent.vue

@@ -7,10 +7,10 @@
 <script>
 export default {
   data() {
-    return {}
+    return {};
   },
   methods: {}
-}
+};
 </script>
 
 <style lang="scss" scoped></style>

src/components/modal/completeModal.vue

@@ -8,16 +8,16 @@
 </template>
 
 <script>
-import CompleteContent from './completeContent'
+import CompleteContent from './completeContent';
 export default {
   components: {
     CompleteContent
   },
   data() {
-    return {}
+    return {};
   },
   methods: {}
-}
+};
 </script>
 
 <style lang="scss" scoped></style>

src/components/modal/modalLayer.vue

@@ -6,26 +6,26 @@
 </template>
 
 <script>
-import CompleteModal from '@/components/modal/completeModal'
-import SelectModal from '@/components/modal/selectModal'
+import CompleteModal from '@/components/modal/completeModal';
+import SelectModal from '@/components/modal/selectModal';
 export default {
   components: {
     CompleteModal,
     SelectModal
   },
   data() {
-    return {}
+    return {};
   },
   methods: {}
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .modal-layer {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 0;
-    height: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
 }
 </style>

src/components/modal/selectContent.vue

@@ -6,21 +6,42 @@
     >
       close
     </div>
-    选择视频
+    <div>选择视频</div>
+    <ul>
+      <li
+        v-for="(item, i) in items"
+        :key="i"
+        class="item"
+        @click="itemClick({ item, index: i })"
+      >
+        {{ item.text }}
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      items: [{ text: '本地上传', type: 'upload' }, { text: '视频库' }, { text: '我的作品' }]
+    };
   },
   methods: {
     close() {
-      this.$modal.hide('selectModal')
+      this.$modal.hide('selectModal');
+    },
+    triggerUpload() {
+      const el = document.getElementById('video-input');
+      el && el.click();
+    },
+    itemClick({ item = {} } = {}) {
+      if (item.type === 'upload') {
+        this.triggerUpload();
+      }
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped></style>

src/components/modal/selectModal.vue

@@ -8,16 +8,16 @@
 </template>
 
 <script>
-import SelectContent from './selectContent'
+import SelectContent from './selectContent';
 export default {
   components: {
     SelectContent
   },
   data() {
-    return {}
+    return {};
   },
   methods: {}
-}
+};
 </script>
 
 <style lang="scss" scoped></style>

src/components/rightPanel/index.vue

@@ -7,18 +7,18 @@
 <script>
 export default {
   data() {
-    return {}
+    return {};
   },
   created() {},
   mounted() {}
-}
+};
 </script>
 
 <style scoped lang="scss">
 /* @import url(); 引入css类 */
 .comp-rightpanel {
-    width: 150px;
-    height: 100%;
-    border: 1px solid skyblue;
+  width: 150px;
+  height: 100%;
+  border: 1px solid skyblue;
 }
 </style>

src/components/rightPanel/screenshotPanel.vue

@@ -7,11 +7,11 @@
 <script>
 export default {
   data() {
-    return {}
+    return {};
   },
   created() {},
   mounted() {}
-}
+};
 </script>
 
 <style></style>

src/components/sideNav/index.vue

@@ -21,32 +21,32 @@
 <script>
 export default {
   data() {
-    return {}
+    return {};
   },
   created() {},
   mounted() {}
-}
+};
 </script>
 
 <style scoped lang="scss">
 /* @import url(); 引入css类 */
 .comp-sidenav {
-    padding: 30px;
-    // width: 100px;
-    border: 1px solid skyblue;
-    height: 100%;
-    // display: flex;
+  padding: 30px;
+  // width: 100px;
+  border: 1px solid skyblue;
+  height: 100%;
+  // display: flex;
 
-    a {
-        font-weight: bold;
-        color: #2c3e50;
-        display: inline-block;
-        width: 100%;
-        padding: 10px 0;
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+    display: inline-block;
+    width: 100%;
+    padding: 10px 0;
 
-        &.router-link-exact-active {
-            color: #42b983;
-        }
+    &.router-link-exact-active {
+      color: #42b983;
     }
+  }
 }
 </style>

src/components/videoConverter/taskComplete.vue

+<template>
+  <div class="taskComplete"></div>
+</template>
+
+<script>
+export default {
+  name: 'TaskComplete',
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  methods: {}
+};
+</script>
+
+<style scoped lang="scss">
+.taskComplete {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border: 0px solid black;
+  margin: 0px;
+}
+</style>

src/components/videoConverter/taskEdit.vue

+<template>
+  <div class="taskEdit">
+    <ul>
+      <li
+        v-for="(item, index) in taskList"
+        :key="index"
+      >
+        <div class="info">
+          <div class="cove">
+            视频封面
+          </div>
+          <div>
+            <div>{{ item.name }}.mp4</div>
+            <div>时长:{{ item.duration }}</div>
+          </div>
+        </div>
+        <div class="operationPanel">
+          <div
+            v-show="item.state == 0"
+            class="wait"
+          >
+            <div>输出格式</div>
+            <div class="selectionFormat">
+              mp4
+            </div>
+            <div
+              class="delete"
+              @click="clearTask(item)"
+            >
+              删除
+            </div>
+          </div>
+          <div
+            v-show="item.state == 1"
+            class="active"
+          >
+            <div class="progress">
+              <div>转换中{{ item.progress }}%</div>
+              <div class="slide">
+                <div></div>
+              </div>
+            </div>
+
+            <div
+              class="stop"
+              @click="stopTask(item)"
+            >
+              取消
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <div class="editBar">
+      <div
+        class="addVideo"
+        @click="addVideo"
+      >
+        添加视频
+      </div>
+      <div
+        class="clearList"
+        @click="clearAllTasks"
+      >
+        清空列表
+      </div>
+      <div class="clearWatermark">
+        去除水印
+      </div>
+    </div>
+
+    <div
+      class="startAll"
+      @click="startAllTasks"
+    >
+      开始转换
+    </div>
+  </div>
+</template>
+
+<script>
+import { start, stop, clear, checkStatus } from './webApi';
+export default {
+  name: 'TaskEdit',
+  components: {},
+  props: {},
+  data() {
+    return {
+      taskList: []
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    for (let i = 1; i < 10; i++) {
+      this.taskList.push({
+        cover: '',
+        name: '视频片段' + i,
+        duration: '10:00',
+        state: 0,
+        progress: 60,
+        outputFormat: 'mp4'
+      });
+    }
+  },
+  methods: {
+    async startTask(item) {
+      let result = await start();
+      if (result) {
+        item.state = 1;
+      } else {
+        item.state = 2;
+      }
+    },
+    async stopTask(item) {
+      let result = await stop();
+      if (result) {
+        item.state = 0;
+      }
+    },
+    async clearTask(item) {
+      let result = await clear();
+      if (result) {
+        let index = this.taskList.indexOf(item);
+        if (index > -1) {
+          this.taskList.splice(index, 1);
+        }
+      }
+    },
+    async checkTaskStatus() {
+      await checkStatus();
+    },
+    addVideo() {
+      this.taskList.push({
+        cover: '',
+        name: '视频片段' + (this.taskList.length + 1),
+        duration: '10:00',
+        state: 0,
+        progress: 60,
+        outputFormat: 'mp4'
+      });
+    },
+    clearAllTasks() {
+      this.taskList = [];
+    },
+    startAllTasks() {
+      this.taskList.forEach((task) => {
+        task.state = 1;
+      });
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.taskEdit {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border: 0px solid black;
+  margin: 0px;
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: default;
+  overflow: hidden;
+  > ul {
+    width: 100%;
+    height: 100%;
+    border: 1px solid black;
+    flex-grow: 1;
+    overflow-y: auto;
+    > li {
+      padding: 5px 0;
+      height: 60px;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    > li:nth-of-type(odd) {
+      background-color: gainsboro;
+    }
+    .info {
+      display: flex;
+      align-items: center;
+      .cove {
+        width: 100px;
+        height: 40px;
+        background-color: #ccc;
+        line-height: 40px;
+        margin-right: 10px;
+      }
+    }
+
+    .operationPanel {
+      width: 300px;
+      height: 100%;
+      .wait {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        .selectionFormat {
+          height: 30px;
+          width: 100px;
+          line-height: 30px;
+          border: 1px solid black;
+          margin-left: 20px;
+        }
+        .delete {
+          width: 60px;
+          height: 30px;
+          line-height: 30px;
+          background-color: black;
+          color: #fff;
+          margin-left: 20px;
+        }
+      }
+      .active {
+        height: 100%;
+        width: 300px;
+        display: flex;
+        align-items: center;
+        .progress {
+        }
+
+        .slide {
+          width: 200px;
+          height: 5px;
+          background: gray;
+          > div {
+            width: 120px;
+            height: 100%;
+            background-color: black;
+          }
+        }
+        .stop {
+          width: 60px;
+          height: 30px;
+          line-height: 30px;
+          background-color: black;
+          color: #fff;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+
+  .editBar {
+    position: relative;
+    height: 30px;
+    width: 100%;
+    margin: 20px 0;
+
+    .addVideo {
+      position: absolute;
+      left: 0;
+      height: 30px;
+      line-height: 30px;
+      border: 1px solid black;
+    }
+    .clearList {
+      position: absolute;
+      left: 100px;
+      height: 30px;
+      line-height: 30px;
+      border: 1px solid black;
+    }
+    .clearWatermark {
+      position: absolute;
+      right: 0;
+      height: 30px;
+      line-height: 30px;
+      border: 1px solid black;
+    }
+  }
+  .startAll {
+    height: 30px;
+    width: 100px;
+    background-color: black;
+    color: #fff;
+    line-height: 30px;
+  }
+}
+</style>

src/components/videoConverter/webApi.js

+async function start() {
+  let result = await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, 1000);
+  });
+  return result;
+}
+async function stop() {
+  let result = await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, 500);
+  });
+  return result;
+}
+
+async function clear() {
+  let result = await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, 500);
+  });
+  return result;
+}
+
+async function checkStatus(fakeValue) {
+  let result = await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(fakeValue++);
+    }, 500);
+  });
+  return result;
+}
+
+export { start, stop, clear, checkStatus };

src/components/videoCutter/videoChange.vue

@@ -10,10 +10,10 @@
 export default {
   methods: {
     changeVideo() {
-      this.$emit('changeVideo')
+      this.$emit('changeVideo');
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 .video-change {

src/components/videoCutter/videoControl.vue

@@ -21,27 +21,27 @@
 export default {
   filters: {
     formatTime(duration) {
-      if (duration <= 0) return '00:00'
-      if (!duration) return '--:--'
-      let min = ~~(duration / 60)
-      min = (min + '').length === 1 ? '0' + min : min
-      let sec = Math.floor(duration % 60)
-      sec = (sec + '').length === 1 ? '0' + sec : sec
-      min = min || '00'
-      sec = sec || '00'
-      return min + ':' + sec
+      if (duration <= 0) return '00:00';
+      if (!duration) return '--:--';
+      let min = ~~(duration / 60);
+      min = (min + '').length === 1 ? '0' + min : min;
+      let sec = Math.floor(duration % 60);
+      sec = (sec + '').length === 1 ? '0' + sec : sec;
+      min = min || '00';
+      sec = sec || '00';
+      return min + ':' + sec;
     }
   },
   props: ['duration', 'nowTime'], // eslint-disable-line
   data() {
-    return {}
+    return {};
   },
   methods: {
     play() {
-      this.$emit('play')
+      this.$emit('play');
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 .video-control {

src/components/videoCutter/videoPlayer.vue

@@ -13,54 +13,54 @@ export default {
       state: 'pluse',
       times: 0,
       canPlay: false
-    }
+    };
   },
   mounted() {
     this.$bus.on('videoPlayer.play', (data) => {
       if (data.time !== undefined) {
-        this.currentTime(data.time)
+        this.currentTime(data.time);
       }
       if (data.play) {
-        this.play()
+        this.play();
       } else {
-        this.pause()
+        this.pause();
       }
-    })
+    });
     this.$nextTick(() => {
-      this.$refs.videoDom.addEventListener('canplay', this.canPlayFunc)
+      this.$refs.videoDom.addEventListener('canplay', this.canPlayFunc);
       this.$refs.videoDom.addEventListener('ended', () => {
-        this.$emit('ended')
-      })
+        this.$emit('ended');
+      });
       this.$refs.videoDom.addEventListener('timeupdate', () => {
-        this.$emit('timeupdate', this.$refs.videoDom.currentTime)
-      })
-    })
+        this.$emit('timeupdate', this.$refs.videoDom.currentTime);
+      });
+    });
   },
   beforeDestroy() {
-    this.$refs.videoDom.removeEventListener('canplay')
-    this.$refs.videoDom.removeEventListener('ended')
-    this.$refs.videoDom.removeEventListener('timeupdate')
+    this.$refs.videoDom.removeEventListener('canplay');
+    this.$refs.videoDom.removeEventListener('ended');
+    this.$refs.videoDom.removeEventListener('timeupdate');
   },
   methods: {
     canPlayFunc() {
-      this.canPlay = true
-      let from = this.$parent.$options.name || 'videoPlayer'
-      this.$bus.emit(`${from}.canPlay`, this.$refs.videoDom.duration)
+      this.canPlay = true;
+      let from = this.$parent.$options.name || 'videoPlayer';
+      this.$bus.emit(`${from}.canPlay`, this.$refs.videoDom.duration);
     },
     play() {
-      if (!this.canPlay) return
-      this.$refs.videoDom.play()
+      if (!this.canPlay) return;
+      this.$refs.videoDom.play();
     },
     pause() {
-      if (!this.canPlay) return
-      this.$refs.videoDom.pause()
+      if (!this.canPlay) return;
+      this.$refs.videoDom.pause();
     },
     currentTime(time) {
-      if (!this.canPlay) return
-      this.$refs.videoDom.currentTime = time
+      if (!this.canPlay) return;
+      this.$refs.videoDom.currentTime = time;
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 .video-player {

src/components/videoCutter/videoTimeline.vue

+<template>
+  <div class="video-timeline">
+    <div
+      ref="sliderWidth"
+      v-drag
+      class="time-slider"
+    >
+      <div class="time-slider-rail"></div>
+      <div
+        class="time-slider-track"
+        :style="{ width: ((info.val - info.min) / info.max) * 100 + '%' }"
+      ></div>
+      <div
+        data-action="handle"
+        class="time-slider-handle"
+        :style="{ left: ((info.val - info.min) / info.max) * 100 + '%' }"
+      ></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'VideoTimeline',
+  directives: {
+    drag(el, binding, vnode) {
+      let _this = vnode.context,
+        mousemove = null,
+        mouseup = null,
+        dataAction = '';
+
+      mousemove = (e) => {
+        _this.dragMove && _this.dragMove(e.pageX, dataAction, e);
+      };
+
+      mouseup = (e) => {
+        document.removeEventListener('mousemove', mousemove);
+        document.removeEventListener('mouseup', mouseup);
+
+        _this.dragUp && _this.dragUp(e.pageX, dataAction, e);
+      };
+
+      el.onmousedown = (e) => {
+        dataAction = e.target.dataset.action;
+
+        if (e.which === 3 || e.which === 2) {
+          e.stopPropagation();
+          return;
+        }
+
+        document.addEventListener('mousemove', mousemove);
+        document.addEventListener('mouseup', mouseup);
+
+        _this.dragDown && _this.dragDown(e.pageX, dataAction, e);
+      };
+    }
+  },
+  props: {
+    info: {
+      type: Object,
+      required: true,
+      default: function() {
+        return { step: 0.1, min: 0, max: 10, val: 0, cut: [0, 10] };
+      }
+    }
+  },
+  data() {
+    return {
+      width: 100
+    };
+  },
+  methods: {
+    dragDown(dis, action) {
+      if (!action) return;
+      this.width = this.$refs.sliderWidth.clientWidth;
+      this.action = action;
+      this.dragHand = true;
+      this.mpos = {
+        x: dis,
+        v: this.info.val
+      };
+      this.$emit('changeData', { val: this.mpos.v, action: action, type: 'start' });
+    },
+    dragMove(pos) {
+      if (!this.action) return;
+      let val = 0;
+      console.log(pos, '<_-------------');
+      // let pre = Math.round(((pos.x - this.mpos.x) / 120 * this.item.len + this.mpos.v) / this.item.step) / (1 / this.item.step);
+      // this.item.val = pre > this.item.max ? this.item.max : pre < this.item.min ? this.item.min : pre;
+      this.$emit('changeData', { val: val, action: this.action, type: 'change' });
+    },
+    dragUp() {
+      if (!this.action) return;
+      let val = 0;
+      this.mpos = null;
+      this.dragHand = false;
+      this.action = '';
+      this.$emit('changeData', { val: val, action: this.action, type: 'end' });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.video-timeline {
+  width: 100%;
+  height: 50px;
+  background-color: beige;
+}
+.time-slider {
+  position: relative;
+  height: 15px;
+  padding: 5px 0;
+  width: 100%;
+  margin-right: 1px;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  * {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .time-slider-rail {
+    position: absolute;
+    width: 100%;
+    background-color: #d9ddea;
+    height: 4px;
+    border-radius: 3px;
+  }
+
+  .time-slider-track {
+    position: absolute;
+    background-color: #737596;
+    border-radius: 3px;
+    height: 4px;
+    left: 0%;
+    width: 69.1515%;
+  }
+
+  .time-slider-handle {
+    position: absolute;
+    margin-left: -6px;
+    margin-top: -4px;
+    left: 69.1515%;
+    width: 12px;
+    height: 12px;
+    background-color: #737596;
+    cursor: -webkit-grab;
+    cursor: grab;
+    border-radius: 50%;
+    -ms-touch-action: pan-x;
+    touch-action: pan-x;
+  }
+}
+</style>

src/main.js

-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import './registerServiceWorker'
-import './assets/style/index.scss'
-import axios from 'axios'
-import VueBus from 'vue-bus'
-import VModal from 'vue-js-modal'
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import './registerServiceWorker';
+import './assets/style/index.scss';
+import axios from 'axios';
+import VueBus from 'vue-bus';
+import VModal from 'vue-js-modal';
 
-Vue.use(VueBus)
-Vue.use(VModal)
+Vue.use(VueBus);
+Vue.use(VModal);
 
-import baseURL from '../config/baseUrl.js'
-console.log('baseURL:', baseURL)
+import baseURL from '../config/baseUrl.js';
+console.log('baseURL:', baseURL);
 
-Vue.config.productionTip = false
-Vue.prototype.$http = axios
+Vue.config.productionTip = false;
+Vue.prototype.$http = axios;
 
 new Vue({
   router,
   store,
   render: (h) => h(App)
-}).$mount('#app')
+}).$mount('#app');

src/registerServiceWorker.js

 /* eslint-disable no-console */
 
-import { register } from 'register-service-worker'
+import { register } from 'register-service-worker';
 
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
     ready() {
-      console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB')
+      console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB');
     },
     registered() {
-      console.log('Service worker has been registered.')
+      console.log('Service worker has been registered.');
     },
     cached() {
-      console.log('Content has been cached for offline use.')
+      console.log('Content has been cached for offline use.');
     },
     updatefound() {
-      console.log('New content is downloading.')
+      console.log('New content is downloading.');
     },
     updated() {
-      console.log('New content is available; please refresh.')
+      console.log('New content is available; please refresh.');
     },
     offline() {
-      console.log('No internet connection found. App is running in offline mode.')
+      console.log('No internet connection found. App is running in offline mode.');
     },
     error(error) {
-      console.error('Error during service worker registration:', error)
+      console.error('Error during service worker registration:', error);
     }
-  })
+  });
 }

src/router/index.js

-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Bao3 from '../views/bao3.vue'
-import Screenshot from '../views/screenshot.vue'
-import screenshotPanel from '../components/rightPanel/screenshotPanel.vue'
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import Bao3 from '../views/bao3.vue';
+import Screenshot from '../views/screenshot.vue';
+import screenshotPanel from '../components/rightPanel/screenshotPanel.vue';
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 const routes = [
   {
@@ -37,12 +37,12 @@ const routes = [
       panel: screenshotPanel
     }
   }
-]
+];
 
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
   routes
-})
+});
 
-export default router
+export default router;

src/store/global.js

@@ -3,19 +3,19 @@
 
 const state = {
   _test: 1
-}
+};
 
 const getters = {
   test: (state) => state._test
-}
+};
 
-const mutations = {}
+const mutations = {};
 
-const actions = {}
+const actions = {};
 
 export default {
   state,
   getters,
   mutations,
   actions
-}
+};

src/store/index.js

-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from 'vue';
+import Vuex from 'vuex';
 
-import global from './global'
-import moduleA from './modules/moduleA'
+import global from './global';
+import moduleA from './modules/moduleA';
+import uploader from './modules/uploader';
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 export default new Vuex.Store({
   ...global,
   modules: {
-    moduleA
+    moduleA,
+    uploader
   }
-})
+});

src/store/modules/moduleA.js

@@ -3,15 +3,15 @@
 
 const state = {
   _moduleState: 'moduleState'
-}
+};
 
 const getters = {
   moduleState: (state) => state._moduleState
-}
+};
 
-const mutations = {}
+const mutations = {};
 
-const actions = {}
+const actions = {};
 
 export default {
   namespaced: true,
@@ -19,4 +19,4 @@ export default {
   getters,
   mutations,
   actions
-}
+};

src/store/modules/uploader.js

+// 模块化vuex数据
+// getter调用示例：this.$store.getters['moduleA/moduleState']
+
+const state = {
+  video: {}
+};
+
+const getters = {
+  video: (state) => state.video
+};
+
+const mutations = {};
+
+const actions = {
+  async upload(store, payload) {
+    console.log('turbo: upload -> store, payload', store, payload);
+  },
+  async storeMaterial() {}
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+};

src/views/bao2.vue

@@ -7,11 +7,11 @@
 <script>
 export default {
   data() {
-    return {}
+    return {};
   },
   created() {},
   mounted() {}
-}
+};
 </script>
 
 <style scoped lang="scss">

src/views/bao3.vue

@@ -8,11 +8,11 @@
 <script>
 export default {
   data() {
-    return {}
+    return {};
   },
   created() {},
   mounted() {}
-}
+};
 </script>
 
 <style scoped lang="scss">

src/views/screenshot.vue

@@ -10,13 +10,23 @@
       ></video>
     </div>
     <div class="operate-area">
-      <input
-        id="screenshot-input"
-        type="file"
-        style="display:none;"
-        @change="changeFile"
-      >
-      <label id="select-btn">选择文件</label>
+      <div class="play-area">
+        <input
+          id="screenshot-input"
+          type="file"
+          style="display:none;"
+          @change="changeFile"
+        >
+        <label id="select-btn">
+          <span>选择文件</span>
+        </label>
+      </div>
+      <div class="time-area">
+        <div id="ss-time-line">
+          <div class="track"></div>
+        </div>
+      </div>
+      <div class="clip-area"></div>
     </div>
   </div>
 </template>
@@ -26,70 +36,67 @@ export default {
   name: 'Screenshot',
   data() {
     return {
-      srcUrl: null
-    }
+      srcUrl: null,
+      videoEle: null,
+      current: 0,
+      duration: 10
+    };
   },
   created() {},
   mounted() {
-    let input = document.getElementById('screenshot-input')
-    let fileBtn = document.getElementById('select-btn')
-    fileBtn.addEventListener('click', function () {
-      input.click()
-    })
-    let video = document.getElementById('screenshot-video')
-    video.onerror = function (e) {
-      console.log('onerror', e)
-    }
-    video.addEventListener('loadedmetadata', function (e) {
-      console.log('loadedmetadata', e)
+    let input = document.getElementById('screenshot-input');
+    let fileBtn = document.getElementById('select-btn');
+    fileBtn.addEventListener('click', function() {
+      input.click();
+    });
+    let video = document.getElementById('screenshot-video');
+    video.onerror = function(e) {
+      console.log('onerror', e);
+    };
+    video.addEventListener('loadedmetadata', function(e) {
+      console.log('loadedmetadata', e);
       //webkitVideoDecodedByteCount
       if (e.target.webkitVideoDecodedByteCount < 1) {
-        console.error('格式不支持')
+        console.error('格式不支持');
       }
-    })
+    });
 
     //loadedmetadata
   },
   methods: {
-    selectClick() {},
     changeFile(e) {
       //console.log('changeFile', e)
       if (e.target.files[0]) {
-        this.srcUrl = URL.createObjectURL(e.target.files[0])
-        // let _this = this
-        // let reader = new FileReader()
-        // reader.addEventListener(
-        //     'load',
-        //     () => {
-        //         console.log('_this.srcUrl', this)
-        //         _this.srcUrl = reader.result
-        //     },
-        //     false
-        // )
-        // reader.readAsDataURL(e.target.files[0])
+        this.srcUrl = URL.createObjectURL(e.target.files[0]);
       }
-      //e.target
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .screenshot {
+  position: relative;
   width: 100%;
   height: 100%;
-  margin: 30px;
   display: flex;
   flex-direction: column;
   .content {
-    height: 90%;
+    height: 100%;
+
     margin: 20px 30px;
     background-color: lightcyan;
   }
   .operate-area {
+    background-color: aqua;
+    height: 200px;
+    display: flex;
+    flex-shrink: 0;
     #select-btn {
-      width: 200px;
-      height: 100px;
+      background-color: bisque;
+      width: 100px;
+      height: 30px;
+      line-height: 30px;
     }
   }
 }

src/views/videoConverter.vue

 <template>
   <div class="videoConverter">
-    <ul>
-      <li
-        v-for="(item, index) in taskList"
-        :key="index"
-      >
-        <div class="info">
-          <div class="cove">
-            视频封面
-          </div>
-          <div>
-            <div>{{ item.name }}.mp4</div>
-            <div>时长:{{ item.duration }}</div>
-          </div>
-        </div>
-        <div class="operationPanel">
-          <div
-            v-show="item.state == 0"
-            class="wait"
-          >
-            <div>输出格式</div>
-            <div class="selectionFormat">
-              mp4
-            </div>
-            <div
-              class="delete"
-              @click="clearTask(item)"
-            >
-              删除
-            </div>
-          </div>
-          <div
-            v-show="item.state == 1"
-            class="active"
-          >
-            <div class="progress">
-              <div>转换中{{ item.progress }}%</div>
-              <div class="slide">
-                <div></div>
-              </div>
-            </div>
-
-            <div
-              class="stop"
-              @click="stopTask(item)"
-            >
-              取消
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-
-    <div class="editBar">
-      <div
-        class="addVideo"
-        @click="addVideo"
-      >
-        添加视频
-      </div>
-      <div
-        class="clearList"
-        @click="clearAllTasks"
-      >
-        清空列表
-      </div>
-      <div class="clearWatermark">
-        去除水印
-      </div>
-    </div>
-
-    <div
-      class="startAll"
-      @click="startAllTasks"
-    >
-      开始转换
-    </div>
+    <taskEdit></taskEdit>
   </div>
 </template>
 
 <script>
+import taskEdit from '@/components/videoConverter/taskEdit';
 export default {
   name: 'VideoConverter',
-  components: {},
+  components: { taskEdit },
   props: {},
   data() {
-    return {
-      taskList: []
-    }
+    return {};
   },
   computed: {},
   watch: {},
-  created() {
-    for (let i = 1; i < 10; i++) {
-      this.taskList.push({
-        cover: '',
-        name: '视频片段' + i,
-        duration: '10:00',
-        state: 0,
-        progress: 60,
-        outputFormat: 'mp4'
-      })
-    }
-  },
-  methods: {
-    addVideo() {
-      this.taskList.push({
-        cover: '',
-        name: '视频片段' + (this.taskList.length + 1),
-        duration: '10:00',
-        state: 0,
-        progress: 60,
-        outputFormat: 'mp4'
-      })
-    },
-    stopTask(item) {
-      item.state = 0
-    },
-    clearTask(item) {
-      let index = this.taskList.indexOf(item)
-      if (index > -1) {
-        this.taskList.splice(index, 1)
-      }
-    },
-    clearAllTasks() {
-      this.taskList = []
-    },
-    startAllTasks() {
-      this.taskList.forEach((task) => {
-        task.state = 1
-      })
-    }
-  }
-}
+  created() {},
+  methods: {}
+};
 </script>
 
 <style scoped lang="scss">
@@ -142,129 +27,5 @@ export default {
   background-color: #fff;
   border: 0px solid black;
   margin: 0px;
-  padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-  overflow: hidden;
-
-  > ul {
-    width: 100%;
-    height: 100%;
-    border: 1px solid black;
-    flex-grow: 1;
-    overflow-y: auto;
-    > li {
-      padding: 5px 0;
-      height: 60px;
-
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    > li:nth-of-type(odd) {
-      background-color: gainsboro;
-    }
-    .info {
-      display: flex;
-      align-items: center;
-      .cove {
-        width: 100px;
-        height: 40px;
-        background-color: #ccc;
-        line-height: 40px;
-        margin-right: 10px;
-      }
-    }
-
-    .operationPanel {
-      width: 300px;
-      height: 100%;
-      .wait {
-        height: 100%;
-        display: flex;
-        align-items: center;
-        .selectionFormat {
-          height: 30px;
-          width: 100px;
-          line-height: 30px;
-          border: 1px solid black;
-          margin-left: 20px;
-        }
-        .delete {
-          width: 60px;
-          height: 30px;
-          line-height: 30px;
-          background-color: black;
-          color: #fff;
-          margin-left: 20px;
-        }
-      }
-      .active {
-        height: 100%;
-        width: 300px;
-        display: flex;
-        align-items: center;
-        .progress {
-        }
-
-        .slide {
-          width: 200px;
-          height: 5px;
-          background: gray;
-          > div {
-            width: 120px;
-            height: 100%;
-            background-color: black;
-          }
-        }
-        .stop {
-          width: 60px;
-          height: 30px;
-          line-height: 30px;
-          background-color: black;
-          color: #fff;
-          margin-left: 20px;
-        }
-      }
-    }
-  }
-
-  .editBar {
-    position: relative;
-    height: 30px;
-    width: 100%;
-    margin: 20px 0;
-
-    .addVideo {
-      position: absolute;
-      left: 0;
-      height: 30px;
-      line-height: 30px;
-      border: 1px solid black;
-    }
-    .clearList {
-      position: absolute;
-      left: 100px;
-      height: 30px;
-      line-height: 30px;
-      border: 1px solid black;
-    }
-    .clearWatermark {
-      position: absolute;
-      right: 0;
-      height: 30px;
-      line-height: 30px;
-      border: 1px solid black;
-    }
-  }
-  .startAll {
-    height: 30px;
-    width: 100px;
-    background-color: black;
-    color: #fff;
-    line-height: 30px;
-  }
 }
 </style>

src/views/videoCutter.vue

 <template>
   <div class="video-cutter">
     <div class="video-content">
-      <VideoPlayer
+      <videoPlayer
         @currentTime="changeTime"
         @end="playEnd"
         @timeupdate="timeupdate"
-      ></VideoPlayer>
+      ></videoPlayer>
     </div>
     <div class="video-btn">
       <videoChange @changeVideo="changeVideo"></videoChange>
@@ -14,9 +14,18 @@
         :now-time="nowTime"
         @play="videoPlay"
       ></videoControl>
-      <div></div>
+      <div class="video-water">
+        <input
+          id="cutterRemoveWater"
+          v-model="noWater"
+          type="checkbox"
+        >
+        <label for="cutterRemoveWater">去除水印</label>
+      </div>
+    </div>
+    <div class="timeline-content">
+      <videoTimeline :info="timelineObj"></videoTimeline>
     </div>
-    <div></div>
     <div></div>
   </div>
 </template>
@@ -27,7 +36,8 @@ export default {
   components: {
     VideoPlayer: () => import('@/components/videoCutter/videoPlayer.vue'),
     VideoChange: () => import('@/components/videoCutter/videoChange.vue'),
-    VideoControl: () => import('@/components/videoCutter/videoControl.vue')
+    VideoControl: () => import('@/components/videoCutter/videoControl.vue'),
+    VideoTimeline: () => import('@/components/videoCutter/videoTimeline.vue')
   },
   data() {
     return {
@@ -35,47 +45,53 @@ export default {
       nowTime: 0,
       duration: 0,
       playing: false,
-      canPlay: false
-    }
+      canPlay: false,
+      noWater: true,
+      timelineObj: { step: 0.1, min: 0, max: 10, val: 0 }
+    };
   },
   created() {},
   mounted() {
-    this.$bus.on('VideoCutter.canPlay', this.canPlayFunc)
+    this.$bus.on('VideoCutter.canPlay', this.canPlayFunc);
   },
   methods: {
     changeVideo() {
-      console.log('todo change video, <-----lilei')
+      console.log('todo change video, <-----lilei');
     },
     canPlayFunc(data) {
-      this.duration = data
-      this.canPlay = true
+      this.duration = data;
+      this.timelineObj.max = this.duration;
+      this.canPlay = true;
     },
     videoPlay() {
-      if (!this.canPlay) return
-      let ob = {}
+      if (!this.canPlay) return;
+      let ob = {};
       if (this.playing) {
-        ob.play = false
+        ob.play = false;
       } else {
-        ob.play = true
+        ob.play = true;
         if (this.nowTime >= this.duration) {
-          ob.time = 0
+          ob.time = 0;
+          this.timelineObj.val = 0;
         }
       }
-      this.playing = !this.playing
-      this.$bus.emit('videoPlayer.play', ob)
+      this.playing = !this.playing;
+      this.$bus.emit('videoPlayer.play', ob);
     },
     changeTime(data) {
-      console.log(data)
+      console.log(data);
     },
     playEnd() {
-      this.playing = false
-      this.nowTime = this.duration
+      this.playing = false;
+      this.nowTime = this.duration;
+      this.timelineObj.val = this.nowTime;
     },
     timeupdate(time) {
-      this.nowTime = time
+      this.nowTime = time;
+      this.timelineObj.val = this.nowTime;
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -92,4 +108,21 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+.video-water {
+  display: flex;
+  align-items: center;
+
+  input {
+    margin-right: 4px;
+  }
+
+  * {
+    cursor: pointer;
+  }
+}
+.timeline-content {
+  width: 100%;
+  margin: 10px 0;
+  padding: 0 20px;
+}
 </style>