Compare commits
3 Commits
ef81e069ee
...
54d59bd34e
| Author | SHA1 | Date |
|---|---|---|
kola-web
|
54d59bd34e | 1 month ago |
|
kola-web
|
93eeab864c | 1 month ago |
|
kola-web
|
514a114123 | 1 month ago |
23 changed files with 787 additions and 398 deletions
@ -1,316 +0,0 @@
@@ -1,316 +0,0 @@
|
||||
[ |
||||
// emmet |
||||
{ |
||||
"key": "alt+e", |
||||
"command": "workbench.action.showEmmetCommands" |
||||
}, |
||||
// console |
||||
{ |
||||
"key": "ctrl+shift+l", |
||||
"command": "js-console.insertConsoleLog", |
||||
"when": "editorTextFocus" |
||||
}, |
||||
{ |
||||
"key": "shift+alt+l", |
||||
"command": "-js-console.insertConsoleLog", |
||||
"when": "editorTextFocus" |
||||
}, |
||||
{ |
||||
"key": "ctrl+shift+t", |
||||
"command": "js-console.insertConsoleTable", |
||||
"when": "editorTextFocus" |
||||
}, |
||||
{ |
||||
"key": "shift+alt+t", |
||||
"command": "-js-console.insertConsoleTable", |
||||
"when": "editorTextFocus" |
||||
}, |
||||
{ |
||||
"key": "ctrl+shift+w", |
||||
"command": "js-console.insertConsoleWarn", |
||||
"when": "editorTextFocus" |
||||
}, |
||||
{ |
||||
"key": "shift+alt+w", |
||||
"command": "-js-console.insertConsoleWarn", |
||||
"when": "editorTextFocus" |
||||
}, |
||||
{ |
||||
"key": "ctrl+shift+d", |
||||
"command": "workbench.debug.panel.action.clearReplAction" |
||||
}, |
||||
{ |
||||
"key": "ctrl+shift+e", |
||||
"command": "js-console.insertConsoleError", |
||||
"when": "editorTextFocus" |
||||
}, |
||||
{ |
||||
"key": "shift+alt+e", |
||||
"command": "-js-console.insertConsoleError", |
||||
"when": "editorTextFocus" |
||||
}, |
||||
// Explorer |
||||
{ |
||||
"key": "enter", |
||||
"command": "list.select", |
||||
"when": "listFocus && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "a", |
||||
"command": "explorer.newFile", |
||||
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "shift+a", |
||||
"command": "explorer.newFolder", |
||||
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "y", |
||||
"command": "filesExplorer.copy", |
||||
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "x", |
||||
"command": "filesExplorer.cut", |
||||
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "p", |
||||
"command": "filesExplorer.paste", |
||||
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "r", |
||||
"command": "renameFile", |
||||
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "m", |
||||
"command": "workbench.files.action.refreshFilesExplorer", |
||||
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus" |
||||
}, |
||||
// { |
||||
// "key": "m", |
||||
// "command": "editor.action.showContextMenu", |
||||
// "when": "explorerViewletVisible && filesExplorerFocus && !inputFocus" |
||||
// }, |
||||
{ |
||||
"key": "q", |
||||
"command": "workbench.action.toggleSidebarVisibility", |
||||
"when": "explorerResourceMoveableToTrash && explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus" |
||||
}, |
||||
// "command": "workbench.files.action.refreshFilesExplorer", |
||||
{ |
||||
"key": "d", |
||||
"command": "moveFileToTrash", |
||||
"when": "explorerResourceMoveableToTrash && explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "shift+d", |
||||
"command": "deleteFile", |
||||
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "c", |
||||
"command": "workbench.files.action.collapseExplorerFolders", |
||||
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "s", |
||||
"command": "explorer.openToSide", |
||||
"when": "explorerViewletFocus && explorerViewletVisible && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "f", |
||||
"command": "revealFileInOS", |
||||
"when": "explorerViewletFocus && explorerViewletVisible && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "t", |
||||
"command": "openInTerminal", |
||||
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "u", |
||||
"command": "copyFilePath", |
||||
"when": "explorerViewletFocus && explorerViewletVisible && !inputFocus" |
||||
}, |
||||
{ |
||||
"key": "i", |
||||
"command": "copyRelativeFilePath", |
||||
"when": "explorerViewletFocus && explorerViewletVisible && !inputFocus" |
||||
}, |
||||
// select |
||||
{ |
||||
"key": "ctrl+n", |
||||
"command": "selectNextSuggestion", |
||||
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus" |
||||
}, |
||||
{ |
||||
"key": "ctrl+n", |
||||
"command": "workbench.action.quickOpenSelectNext", |
||||
"when": "inQuickOpen" |
||||
}, |
||||
{ |
||||
"key": "ctrl+p", |
||||
"command": "selectPrevSuggestion", |
||||
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus" |
||||
}, |
||||
{ |
||||
"key": "ctrl+p", |
||||
"command": "workbench.action.quickOpenSelectPrevious", |
||||
"when": "inQuickOpen" |
||||
}, |
||||
// focus |
||||
{ |
||||
"key": "ctrl+h", |
||||
"command": "workbench.action.navigateLeft", |
||||
"when": "terminalFocus || sideBarFocus" |
||||
}, |
||||
{ |
||||
"key": "ctrl+l", |
||||
"command": "workbench.action.navigateRight", |
||||
"when": "terminalFocus || sideBarFocus" |
||||
}, |
||||
{ |
||||
"key": "ctrl+p", |
||||
"command": "workbench.action.navigateUp", |
||||
"when": "terminalFocus || sideBarFocus" |
||||
}, |
||||
{ |
||||
"key": "ctrl+n", |
||||
"command": "workbench.action.navigateDown", |
||||
"when": "terminalFocus || sideBarFocus" |
||||
}, |
||||
// changeCase |
||||
{ |
||||
"key": "alt+;", |
||||
"command": "extension.changeCase.commands" |
||||
}, |
||||
// focus |
||||
{ |
||||
"key": "alt+`", |
||||
"command": "workbench.action.toggleSidebarVisibility" |
||||
}, |
||||
{ |
||||
"key": "alt+1", |
||||
"command": "workbench.view.explorer" |
||||
}, |
||||
{ |
||||
"key": "alt-2", |
||||
"command": "outline.focus" |
||||
}, |
||||
{ |
||||
"key": "alt-3", |
||||
"command": "workbench.view.extension.project-manager" |
||||
}, |
||||
{ |
||||
"key": "alt-4", |
||||
"command": "todo-tree-view.focus" |
||||
}, |
||||
{ |
||||
"key": "alt-5", |
||||
"command": "workbench.view.extension.dockerView" |
||||
}, |
||||
{ |
||||
"key": "alt+9", |
||||
"command": "workbench.view.scm" |
||||
}, |
||||
{ |
||||
"key": "alt-0", |
||||
"command": "workbench.action.toggleActivityBarVisibility" |
||||
}, |
||||
{ |
||||
"key": "tab", |
||||
"command": "markdown.extension.onTabKey", |
||||
"when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus && !hasOtherSuggestions && !hasSnippetCompletions && !inSnippetMode && !suggestWidgetVisible && editorLangId == 'markdown' && vim.mode =='Insert'" |
||||
}, |
||||
{ |
||||
"key": "tab", |
||||
"command": "-markdown.extension.onTabKey", |
||||
"when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus && !hasOtherSuggestions && !hasSnippetCompletions && !inSnippetMode && !suggestWidgetVisible && editorLangId == 'markdown'" |
||||
}, |
||||
{ |
||||
"key": "shift+tab", |
||||
"command": "-markdown.extension.onShiftTabKey", |
||||
"when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus && !hasOtherSuggestions && !hasSnippetCompletions && !inSnippetMode && !suggestWidgetVisible && editorLangId == 'markdown'" |
||||
}, |
||||
{ |
||||
"key": "shift+tab", |
||||
"command": "markdown.extension.onShiftTabKey", |
||||
"when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus && !hasOtherSuggestions && !hasSnippetCompletions && !inSnippetMode && !suggestWidgetVisible && editorLangId == 'markdown' && vim.mode =='Insert'" |
||||
}, |
||||
// nav buffer |
||||
{ |
||||
"key": "tab", |
||||
"command": "workbench.action.nextEditor", |
||||
"when": "vim.mode != 'Insert' && vim.mode != 'CommandlineInProgress' && !panelFocus" |
||||
}, |
||||
{ |
||||
"key": "shift+tab", |
||||
"command": "workbench.action.previousEditor", |
||||
"when": "vim.mode != 'Insert' && vim.mode != 'CommandlineInProgress' && !panelFocus" |
||||
}, |
||||
// 转换色值格式 |
||||
{ |
||||
"key": "alt+-", |
||||
"command": "color-conversion.colorConversion", |
||||
"when": "editorTextFocus && editorHasSelection" |
||||
}, |
||||
// whichkey |
||||
{ |
||||
"key": "space", |
||||
"command": "whichkey.show", |
||||
"when": "!inputFocus" |
||||
}, |
||||
{ |
||||
"key": "e", |
||||
"command": "whichkey.triggerKey", |
||||
"args": { |
||||
"key": "e", |
||||
"when": "sideBarVisible && explorerViewletVisible" |
||||
}, |
||||
"when": "whichkeyVisible && sideBarVisible && explorerViewletVisible" |
||||
}, |
||||
// 编辑器大小 |
||||
{ |
||||
"key": "shift+ctrl+0", |
||||
"command": "workbench.action.evenEditorWidths" |
||||
}, |
||||
{ |
||||
"key": "ctrl+down", |
||||
"command": "workbench.action.decreaseViewHeight" |
||||
}, |
||||
{ |
||||
"key": "ctrl+up", |
||||
"command": "workbench.action.increaseViewHeight" |
||||
}, |
||||
{ |
||||
"key": "ctrl+right", |
||||
"command": "workbench.action.decreaseViewWidth" |
||||
}, |
||||
{ |
||||
"key": "ctrl+left", |
||||
"command": "workbench.action.increaseViewWidth" |
||||
}, |
||||
{ |
||||
"key": "alt+j", |
||||
"command": "workbench.action.togglePanel" |
||||
}, |
||||
{ |
||||
"key": "ctrl+j", |
||||
"command": "-workbench.action.togglePanel" |
||||
}, |
||||
// replace vim C-d C-u |
||||
{ |
||||
"key": "ctrl+d", |
||||
"command": "cursorPageDown", |
||||
"when": "textInputFocus" |
||||
}, |
||||
{ |
||||
"key": "ctrl+u", |
||||
"command": "cursorPageUp", |
||||
"when": "textInputFocus" |
||||
} |
||||
] |
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 633 B |
|
After Width: | Height: | Size: 874 B |
|
After Width: | Height: | Size: 595 B |
|
After Width: | Height: | Size: 901 B |
@ -0,0 +1,254 @@
@@ -0,0 +1,254 @@
|
||||
module.exports = |
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {}; |
||||
/******/ |
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) { |
||||
/******/ |
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) { |
||||
/******/ return installedModules[moduleId].exports; |
||||
/******/ } |
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = { |
||||
/******/ i: moduleId, |
||||
/******/ l: false, |
||||
/******/ exports: {} |
||||
/******/ }; |
||||
/******/ |
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); |
||||
/******/ |
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true; |
||||
/******/ |
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports; |
||||
/******/ } |
||||
/******/ |
||||
/******/ |
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules; |
||||
/******/ |
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules; |
||||
/******/ |
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) { |
||||
/******/ if(!__webpack_require__.o(exports, name)) { |
||||
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); |
||||
/******/ } |
||||
/******/ }; |
||||
/******/ |
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) { |
||||
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { |
||||
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); |
||||
/******/ } |
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true }); |
||||
/******/ }; |
||||
/******/ |
||||
/******/ // create a fake namespace object
|
||||
/******/ // mode & 1: value is a module id, require it
|
||||
/******/ // mode & 2: merge all properties of value into the ns
|
||||
/******/ // mode & 4: return value when already ns object
|
||||
/******/ // mode & 8|1: behave like require
|
||||
/******/ __webpack_require__.t = function(value, mode) { |
||||
/******/ if(mode & 1) value = __webpack_require__(value); |
||||
/******/ if(mode & 8) return value; |
||||
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; |
||||
/******/ var ns = Object.create(null); |
||||
/******/ __webpack_require__.r(ns); |
||||
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); |
||||
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); |
||||
/******/ return ns; |
||||
/******/ }; |
||||
/******/ |
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) { |
||||
/******/ var getter = module && module.__esModule ? |
||||
/******/ function getDefault() { return module['default']; } : |
||||
/******/ function getModuleExports() { return module; }; |
||||
/******/ __webpack_require__.d(getter, 'a', getter); |
||||
/******/ return getter; |
||||
/******/ }; |
||||
/******/ |
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; |
||||
/******/ |
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = ""; |
||||
/******/ |
||||
/******/ |
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0); |
||||
/******/ }) |
||||
/************************************************************************/ |
||||
/******/ ([ |
||||
/* 0 */ |
||||
/***/ (function(module, exports, __webpack_require__) { |
||||
|
||||
"use strict"; |
||||
|
||||
|
||||
Component({ |
||||
options: { |
||||
addGlobalClass: true, |
||||
pureDataPattern: /^_/ |
||||
}, |
||||
properties: { |
||||
duration: { |
||||
type: Number, |
||||
value: 500 |
||||
}, |
||||
easingFunction: { |
||||
type: String, |
||||
value: 'default' |
||||
}, |
||||
loop: { |
||||
type: Boolean, |
||||
value: true |
||||
}, |
||||
videoList: { |
||||
type: Array, |
||||
value: [], |
||||
observer: function observer() { |
||||
var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; |
||||
|
||||
this._videoListChanged(newVal); |
||||
} |
||||
} |
||||
}, |
||||
data: { |
||||
nextQueue: [], |
||||
prevQueue: [], |
||||
curQueue: [], |
||||
circular: false, |
||||
_last: 1, |
||||
_change: -1, |
||||
_invalidUp: 0, |
||||
_invalidDown: 0, |
||||
_videoContexts: [] |
||||
}, |
||||
lifetimes: { |
||||
attached: function attached() { |
||||
this.data._videoContexts = [wx.createVideoContext('video_0', this), wx.createVideoContext('video_1', this), wx.createVideoContext('video_2', this)]; |
||||
} |
||||
}, |
||||
methods: { |
||||
_videoListChanged: function _videoListChanged(newVal) { |
||||
var _this = this; |
||||
|
||||
var data = this.data; |
||||
newVal.forEach(function (item) { |
||||
data.nextQueue.push(item); |
||||
}); |
||||
if (data.curQueue.length === 0) { |
||||
this.setData({ |
||||
curQueue: data.nextQueue.splice(0, 3) |
||||
}, function () { |
||||
_this.playCurrent(1); |
||||
}); |
||||
} |
||||
}, |
||||
animationfinish: function animationfinish(e) { |
||||
var _data = this.data, |
||||
_last = _data._last, |
||||
_change = _data._change, |
||||
curQueue = _data.curQueue, |
||||
prevQueue = _data.prevQueue, |
||||
nextQueue = _data.nextQueue; |
||||
|
||||
var current = e.detail.current; |
||||
var diff = current - _last; |
||||
if (diff === 0) return; |
||||
this.data._last = current; |
||||
this.playCurrent(current); |
||||
this.triggerEvent('change', { activeId: curQueue[current].id }); |
||||
var direction = diff === 1 || diff === -2 ? 'up' : 'down'; |
||||
if (direction === 'up') { |
||||
if (this.data._invalidDown === 0) { |
||||
var change = (_change + 1) % 3; |
||||
var add = nextQueue.shift(); |
||||
var remove = curQueue[change]; |
||||
if (add) { |
||||
prevQueue.push(remove); |
||||
curQueue[change] = add; |
||||
this.data._change = change; |
||||
} else { |
||||
this.data._invalidUp += 1; |
||||
} |
||||
} else { |
||||
this.data._invalidDown -= 1; |
||||
} |
||||
} |
||||
if (direction === 'down') { |
||||
if (this.data._invalidUp === 0) { |
||||
var _change2 = _change; |
||||
var _remove = curQueue[_change2]; |
||||
var _add = prevQueue.pop(); |
||||
if (_add) { |
||||
curQueue[_change2] = _add; |
||||
nextQueue.unshift(_remove); |
||||
this.data._change = (_change2 - 1 + 3) % 3; |
||||
} else { |
||||
this.data._invalidDown += 1; |
||||
} |
||||
} else { |
||||
this.data._invalidUp -= 1; |
||||
} |
||||
} |
||||
var circular = true; |
||||
if (nextQueue.length === 0 && current !== 0) { |
||||
circular = false; |
||||
} |
||||
if (prevQueue.length === 0 && current !== 2) { |
||||
circular = false; |
||||
} |
||||
this.setData({ |
||||
curQueue: curQueue, |
||||
circular: circular |
||||
}); |
||||
}, |
||||
playCurrent: function playCurrent(current) { |
||||
this.data._videoContexts.forEach(function (ctx, index) { |
||||
index !== current ? ctx.pause() : ctx.play(); |
||||
}); |
||||
}, |
||||
onPlay: function onPlay(e) { |
||||
this.trigger(e, 'play'); |
||||
}, |
||||
onPause: function onPause(e) { |
||||
this.trigger(e, 'pause'); |
||||
}, |
||||
onEnded: function onEnded(e) { |
||||
this.trigger(e, 'ended'); |
||||
}, |
||||
onError: function onError(e) { |
||||
this.trigger(e, 'error'); |
||||
}, |
||||
onTimeUpdate: function onTimeUpdate(e) { |
||||
this.trigger(e, 'timeupdate'); |
||||
}, |
||||
onWaiting: function onWaiting(e) { |
||||
this.trigger(e, 'wait'); |
||||
}, |
||||
onProgress: function onProgress(e) { |
||||
this.trigger(e, 'progress'); |
||||
}, |
||||
onLoadedMetaData: function onLoadedMetaData(e) { |
||||
this.trigger(e, 'loadedmetadata'); |
||||
}, |
||||
trigger: function trigger(e, type) { |
||||
var ext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; |
||||
|
||||
var detail = e.detail; |
||||
var activeId = e.target.dataset.id; |
||||
this.triggerEvent(type, Object.assign(Object.assign(Object.assign({}, detail), { activeId: activeId }), ext)); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
/***/ }) |
||||
/******/ ]); |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,37 @@
@@ -0,0 +1,37 @@
|
||||
<view class="container"> |
||||
<swiper |
||||
class="video-swiper" |
||||
circular="{{circular}}" |
||||
easing-function="{{easingFunction}}" |
||||
vertical |
||||
current="1" |
||||
duration="{{duration}}" |
||||
bindanimationfinish="animationfinish"> |
||||
<!-- curQueue 循环会导致video重新插入，objectFit 不可变更 --> |
||||
<swiper-item wx:for="{{curQueue}}" wx:key="*this"> |
||||
<video |
||||
id="video_{{index}}" |
||||
class="video_item" |
||||
loop="{{loop}}" |
||||
enable-play-gesture |
||||
enable-progress-gesture |
||||
show-center-play-btn="{{false}}" |
||||
controls="{{false}}" |
||||
src="{{item.url}}" |
||||
data-id="{{item.id}}" |
||||
object-fit="{{item.objectFit || 'cover'}}" |
||||
data-index="{{index}}" |
||||
bindplay="onPlay" |
||||
bindpause="onPause" |
||||
bindended="onEnded" |
||||
binderror="onError" |
||||
bindtimeupdate="onTimeUpdate" |
||||
bindwaiting="onWaiting" |
||||
bindprogress="onProgress" |
||||
bindloadedmetadata="onLoadedMetaData" |
||||
> |
||||
</video> |
||||
</swiper-item> |
||||
</swiper> |
||||
</view> |
||||
|
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
.container{width:100%;height:100%}.video-swiper{width:100%;height:100%}.video_item{height:100%;width:100%} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
{ |
||||
"navigationStyle": "custom", |
||||
"usingComponents": { |
||||
"mp-video-swiper": "@miniprogram-component-plus/video-swiper", |
||||
"navbar": "/components/navbar/index", |
||||
"van-slider": "@vant/weapp/slider/index", |
||||
"star": "/components/star/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,109 @@
@@ -0,0 +1,109 @@
|
||||
.page { |
||||
background-color: #000; |
||||
.swiper { |
||||
width: 100vw; |
||||
height: 100vh; |
||||
.swiper-item { |
||||
position: relative; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
.video { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.play { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 90rpx; |
||||
height: 104rpx; |
||||
} |
||||
.swiper-item-footer { |
||||
padding: 80rpx 30rpx calc(34rpx + env(safe-area-inset-bottom)); |
||||
width: 100%; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
box-sizing: border-box; |
||||
background: linear-gradient(to top, rgba(20, 20, 20, 0.88) 0%, rgba(20, 20, 20, 0) 100%); |
||||
.title { |
||||
font-size: 32rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
.progress { |
||||
margin-top: 24rpx; |
||||
.slider-btn { |
||||
width: 200vw; |
||||
height: 80rpx; |
||||
} |
||||
} |
||||
.container { |
||||
margin-top: 24rpx; |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.user { |
||||
display: flex; |
||||
align-items: center; |
||||
.avatar { |
||||
width: 76rpx; |
||||
height: 76rpx; |
||||
border-radius: 50%; |
||||
} |
||||
.name { |
||||
margin-left: 16rpx; |
||||
font-size: 28rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
} |
||||
.options { |
||||
padding-right: 26rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 64rpx; |
||||
.o-item { |
||||
padding: 0; |
||||
margin: 0; |
||||
border: none; |
||||
outline: none; |
||||
background: transparent; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
line-height: 1; |
||||
&::after { |
||||
border: none; |
||||
} |
||||
.icon { |
||||
width: 36rpx; |
||||
height: 36rpx; |
||||
} |
||||
.num { |
||||
margin-top: 6rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
&.active { |
||||
color: rgba(246, 74, 58, 1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.animate { |
||||
position: fixed; |
||||
z-index: 10000000; |
||||
right: 1000000px; |
||||
bottom: calc(env(safe-area-inset-bottom) + 110rpx); |
||||
width: 200rpx; |
||||
height: 400rpx; |
||||
&.active { |
||||
right: -20rpx; |
||||
} |
||||
} |
||||
@ -0,0 +1,198 @@
@@ -0,0 +1,198 @@
|
||||
import dayjs from 'dayjs' |
||||
const licia = require('miniprogram-licia') |
||||
const app = getApp<IAppOption>() |
||||
// 组件说明文档 https://github.com/wechat-miniprogram/miniprogram-component-plus/blob/master/docs/video-swiper.md
|
||||
|
||||
Page({ |
||||
data: { |
||||
id: '', |
||||
activeId: '', |
||||
LikeTimes: 0, |
||||
|
||||
current: 0, |
||||
videoList: [] as any, |
||||
|
||||
beforeLoading: false, |
||||
beforeEnd: false, |
||||
afterLoading: false, |
||||
afterEnd: false, |
||||
|
||||
starShow: false, |
||||
|
||||
index: 0, |
||||
}, |
||||
onLoad(options) { |
||||
this.setData({ |
||||
id: options.id, |
||||
activeId: options.id, |
||||
index: Number(options.index), |
||||
}) |
||||
app.waitLogin({ type: [0, 1] }).then(() => { |
||||
this.getLightList() |
||||
}) |
||||
}, |
||||
getLightList() { |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=zd/activity/get-high-light-list', |
||||
data: { activityId: this.data.id }, |
||||
}).then((res) => { |
||||
res.map((item: any) => { |
||||
item.duration = dayjs(item.duration * 1000).format('mm:ss') |
||||
return item |
||||
}) |
||||
this.setData({ |
||||
videoList: res, |
||||
current: this.data.index, |
||||
}) |
||||
this.playCurrentVideo() |
||||
}) |
||||
}, |
||||
handleChange(e: any) { |
||||
const { beforeLoading, afterLoading, beforeEnd, afterEnd, videoList } = this.data |
||||
const { current } = e.detail |
||||
this.setData({ |
||||
current, |
||||
starShow: false, |
||||
}) |
||||
if (current === 0 && !beforeLoading && beforeEnd) { |
||||
this.setData({ |
||||
beforeLoading: true, |
||||
}) |
||||
// this.getList('before')
|
||||
} |
||||
if (current === videoList.length - 1 && !afterLoading && afterEnd) { |
||||
this.setData({ |
||||
afterLoading: true, |
||||
}) |
||||
// this.getList('after')
|
||||
} |
||||
this.playCurrentVideo() |
||||
}, |
||||
playCurrentVideo() { |
||||
const { current, videoList } = this.data |
||||
videoList.forEach((item: any, index: number) => { |
||||
if (!item.ctx) { |
||||
item.ctx = wx.createVideoContext(`video-${item.attachmentId}`) |
||||
} |
||||
item.drag = false |
||||
if (index === current) { |
||||
item.ctx.play() |
||||
} else { |
||||
item.ctx.pause() |
||||
} |
||||
}) |
||||
}, |
||||
handlePlay(e: any) { |
||||
const { index } = e.currentTarget.dataset |
||||
const key = `videoList[${index}].play` |
||||
this.setData({ |
||||
[key]: true, |
||||
}) |
||||
}, |
||||
handlePause(e: any) { |
||||
const { index } = e.currentTarget.dataset |
||||
const key = `videoList[${index}].play` |
||||
this.setData({ |
||||
[key]: false, |
||||
}) |
||||
}, |
||||
handleTimeUpdate(e: any) { |
||||
const { index } = e.currentTarget.dataset |
||||
const { videoList } = this.data |
||||
if (videoList[index].drag) return |
||||
const { currentTime, duration } = e.detail |
||||
const progress = (currentTime / duration) * 100 |
||||
const progressKey = `videoList[${index}].progress` |
||||
const durationKey = `videoList[${index}].duration` |
||||
this.setData({ |
||||
[progressKey]: progress, |
||||
[durationKey]: duration, |
||||
}) |
||||
}, |
||||
handleTogglePlay(e) { |
||||
const { index } = e.currentTarget.dataset |
||||
const { videoList } = this.data |
||||
if (videoList[index].play) { |
||||
videoList[index].ctx.pause() |
||||
} else { |
||||
videoList[index].ctx.play() |
||||
} |
||||
}, |
||||
handleDragStart(e: any) { |
||||
const { index } = e.currentTarget.dataset |
||||
const key = `videoList[${index}].drag` |
||||
this.setData({ |
||||
[key]: true, |
||||
}) |
||||
}, |
||||
handleDragEnd(e: any) { |
||||
const { index } = e.currentTarget.dataset |
||||
const { videoList } = this.data |
||||
const duration = videoList[index].duration |
||||
const drapProgress = e.detail |
||||
const currentTime = (drapProgress / 100) * duration |
||||
videoList[index].ctx.seek(currentTime) |
||||
const dragKey = `videoList[${index}].drag` |
||||
this.setData({ |
||||
[dragKey]: false, |
||||
}) |
||||
}, |
||||
_timer: null as any, |
||||
handleLike(e: any) { |
||||
const { index } = e.currentTarget.dataset |
||||
const { videoList } = this.data |
||||
const currentVideo = videoList[index] |
||||
const LikeTimes = Number(currentVideo.LikeTimes) + 1 |
||||
const key = `videoList[${index}].LikeTimes` |
||||
this.setData({ |
||||
LikeTimes: this.data.LikeTimes + 1, |
||||
[key]: LikeTimes, |
||||
[`videoList[${index}].IsLike`]: true, |
||||
starShow: true, |
||||
}) |
||||
const header = this.selectComponent('#animate') |
||||
header.start() |
||||
if (this._timer) { |
||||
clearInterval(this._timer) |
||||
} |
||||
this._timer = setTimeout(() => { |
||||
this.setData({ |
||||
starShow: false, |
||||
}) |
||||
}, 2000) |
||||
this.likePost() |
||||
}, |
||||
likePost: licia.debounce(function (this: any) { |
||||
const { activeId, LikeTimes } = this.data |
||||
this.setData({ |
||||
LikeTimes: 0, |
||||
}) |
||||
wx.ajax({ |
||||
method: 'POST', |
||||
url: '?r=wtx/knowledge/like', |
||||
data: { |
||||
Id: activeId, |
||||
LikeTimes, |
||||
}, |
||||
}) |
||||
}, 1000), |
||||
onShareAppMessage() { |
||||
const { current, videoList } = this.data |
||||
const currentVideo = videoList[current] |
||||
this.setData({ |
||||
[`videoList[${current}].ShareTimes`]: Number(currentVideo.ShareTimes) + 1, |
||||
[`videoList[${current}].IsShare`]: true, |
||||
}) |
||||
wx.ajax({ |
||||
method: 'POST', |
||||
url: '?r=wtx/knowledge/share', |
||||
data: { Id: this.data.activeId }, |
||||
}) |
||||
}, |
||||
handleBack() { |
||||
wx.navigateBack() |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
@ -0,0 +1,74 @@
@@ -0,0 +1,74 @@
|
||||
<navbar fixed custom-style="background:{{background}};color:#fff"> |
||||
<van-icon name="arrow-left" slot="left" size="18px" color="#fff" bind:tap="handleBack" /> |
||||
<view slot="title" style="color: #fff">视频</view> |
||||
</navbar> |
||||
<view class="page"> |
||||
<swiper class="swiper" vertical="{{true}}" current="{{current}}" bindchange="handleChange"> |
||||
<swiper-item class="swiper-item" wx:for="{{videoList}}" wx:key="Id"> |
||||
<video |
||||
id="video-{{item.attachmentId}}" |
||||
class="video" |
||||
src="{{item.videoUrl}}" |
||||
poster="{{item.imgUrl}}" |
||||
loop |
||||
object-fit="contain" |
||||
enable-play-gesture |
||||
enable-progress-gesture |
||||
show-center-play-btn="{{false}}" |
||||
play-btn-position="center" |
||||
controls="{{false}}" |
||||
bindprogress="handleProgress" |
||||
bindplay="handlePlay" |
||||
bindpause="handlePause" |
||||
bindtimeupdate="handleTimeUpdate" |
||||
data-index="{{index}}" |
||||
bind:tap="handleTogglePlay" |
||||
></video> |
||||
<image |
||||
wx:if="{{!item.play}}" |
||||
class="play" |
||||
class="play" |
||||
src="{{imageUrl}}icon82.png?t={{Timestamp}}" |
||||
catch:tap="handleTogglePlay" |
||||
data-index="{{index}}" |
||||
></image> |
||||
<view class="swiper-item-footer"> |
||||
<view class="title">{{item.Title}}</view> |
||||
<view class="progress"> |
||||
<van-slider |
||||
value="{{item.progress}}" |
||||
active-color="#fff" |
||||
bar-height="4" |
||||
inactive-color="rgba(255, 255, 255, 0.29)" |
||||
bind:drag-start="handleDragStart" |
||||
bind:change="handleDragEnd" |
||||
use-button-slot |
||||
data-index="{{index}}" |
||||
> |
||||
<view class="slider-btn" slot="button"></view> |
||||
</van-slider> |
||||
</view> |
||||
<view class="container"> |
||||
<view class="user"> |
||||
<image class="avatar" src="{{imageUrl}}logo1.png?t={{Timestamp}}"></image> |
||||
<view class="name">基因知识库</view> |
||||
</view> |
||||
<view class="options"> |
||||
<button class="o-item" open-type="share"> |
||||
<image wx:if="{{item.IsShare}}" class="icon" src="{{imageUrl}}icon83.png?t={{Timestamp}}"></image> |
||||
<image wx:else class="icon" src="{{imageUrl}}icon85.png?t={{Timestamp}}"></image> |
||||
<view class="num {{item.IsShare && 'active'}}">{{item.ShareTimes}}</view> |
||||
</button> |
||||
<view class="o-item" bind:tap="handleLike" data-index="{{index}}"> |
||||
<image wx:if="{{item.IsLike}}" class="icon" src="{{imageUrl}}icon84.png?t={{Timestamp}}"></image> |
||||
<image wx:else class="icon" src="{{imageUrl}}icon86.png?t={{Timestamp}}"></image> |
||||
<view class="num {{item.IsLike && 'active'}}">{{item.LikeTimes}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</swiper-item> |
||||
</swiper> |
||||
</view> |
||||
|
||||
<star id="animate" class="animate {{starShow&&'active'}}"></star> |
||||
Loading…
Reference in new issue