Authored by yyq

video

import Widgets from './widgets';
import Images from './images';
import Videos from './videos';
import Layouts from './layouts';
import Products from './products';
import Comments from './comments';
... ... @@ -9,6 +10,7 @@ import TextEllipsis from './textellipsis';
export default [
...Widgets,
...Images,
...Videos,
...Layouts,
...Products,
...Comments,
... ...
import VideoPlayer from './video-player';
export default [
VideoPlayer,
];
... ...
<template>
<div class="video-player">
<video
ref="videoPlayer"
class="video-js vjs-matrix vjs-yoho"
controls
preload="auto">
<source :src="source" type="video/mp4"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
</p>
</video>
</div>
</template>
<script>
import videojs from 'video.js';
export default {
name: 'VideoPlayer',
props: {
source: String,
options: {
type: Object,
default() {
return {
techOrder: ['html5', 'flash'],
muted: true,
controls: true,
aspectRatio: '1:1'
};
}
}
},
data() {
return {
player: null
};
},
mounted() {
this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
this.play();
});
},
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
}
};
</script>
<style src="video.js/dist/video-js.css"></style>
<style lang="scss" scoped>
.video-js {
width: 100%;
height: auto;
video {
width: 100%;
}
&.vjs-yoho /deep/ {
.vjs-big-play-button {
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 50%;
left: 50%;
top: 50%;
margin: -35px auto auto -35px;
}
.vjs-control-bar .vjs-icon-placeholder {
font-size: 22px;
}
}
}
</style>
... ...
... ... @@ -32,7 +32,7 @@
</template>
<script>
import {first, round} from 'lodash';
import {first, round, findIndex} from 'lodash';
import {Slide} from 'cube-ui';
import ArticleItemSlideImage from './article-item-slide-image';
import {mapState, createNamespacedHelpers} from 'vuex';
... ... @@ -86,10 +86,19 @@ export default {
}
},
firstBlockSize() {
const allowScale = [4 / 3, 3 / 4];
const {width, height} = first(this.data.blockList) || {};
if (width && height) {
const scale = width / height;
let scale = width / height;
const index = findIndex(allowScale, o => {
return Math.abs(scale - o) < 0.01;
});
if (index < 0) {
scale = 1;
}
return {
width: 750 / 40,
... ...
... ... @@ -4,7 +4,7 @@
<div class="article-item-main">
<a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a>
<div class="layer-image" :style="`height: ${Math.floor(width * coverImage.scale)}px`" @click="toArticlePage">
<div v-if="data.sort === 2" class="article-long-icon"></div>
<div v-if="cornerMark" class="article-corner-mark" :class="cornerMark"></div>
<ImageFormat :mode="1" :src="coverImage.contentData" :width="coverImage.width" :height="coverImage.height"></ImageFormat>
</div>
<div v-if="intro" class="description" @click="toArticlePage">{{intro}}</div>
... ... @@ -64,6 +64,10 @@ export default {
height: this.data.imageHeight
};
if (img.contentData && img.contentData.indexOf('?') < 0) {
img.contentData += '?imageView2/{mode}/w/{width}/h/{height}';
}
img = Object.assign({...img}, getArticleImageSize({
width: img.width,
height: img.height,
... ... @@ -93,6 +97,22 @@ export default {
iconFontSize: 30,
textAlign: 'normal'
};
},
cornerMark() {
let className = '';
switch (+this.data.sort) {
case 2:
className = 'article-long-icon';
break;
case 4:
className = 'article-video-icon';
break;
default:
break;
}
return className;
}
},
methods: {
... ... @@ -179,16 +199,23 @@ export default {
z-index: 1;
}
.article-long-icon {
.article-corner-mark {
width: 36px;
height: 36px;
position: absolute;
top: 18px;
right: 18px;
background-image: url("~statics/image/article/article-long-icon.png");
background-size: 100% 100%;
}
.article-long-icon {
background-image: url("~statics/image/article/article-long-icon.png");
}
.article-video-icon {
background-image: url("~statics/image/article/article-video-icon.png");
}
.layer-image img {
width: 100%;
height: 100%;
... ...
... ... @@ -7,7 +7,8 @@
{{data.emptyTip || '文章不存在或文章被删除'}}
</div>
<div v-else class="article-context">
<ArticleItemSlide :thumb="thumb" :share="share" :data="slideData" :slide-index="slideIndex" :lazy="lazy" @on-praise="onPraise" @change="onChangeSlide"></ArticleItemSlide>
<VideoPlayer v-if="+data.sort === 4" :source="data.videoUrl"></VideoPlayer>
<ArticleItemSlide v-else :thumb="thumb" :share="share" :data="slideData" :slide-index="slideIndex" :lazy="lazy" @on-praise="onPraise" @change="onChangeSlide"></ArticleItemSlide>
<ProductGroup :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
<ArticleDetailIntro :data="introData"></ArticleDetailIntro>
... ... @@ -95,10 +96,16 @@ export default {
return this.data.productList || [];
},
introData() {
let blockList = get(this.data, 'blockList', []);
let intro;
if (this.data.sort === 4) {
intro = this.data.content;
} else {
intro = get(get(this.data, 'blockList', []).filter(block => block.templateKey === 'text'), '[0].contentData', '');
}
return {
intro: get(blockList.filter(block => block.templateKey === 'text'), '[0].contentData', ''),
intro,
maxLines: 10
};
},
... ...
... ... @@ -55,6 +55,7 @@
"serve-favicon": "^2.5.0",
"source-map": "^0.7.3",
"uuid": "^3.3.2",
"video.js": "^7.5.5",
"vue": "^2.6.6",
"vue-awesome-swiper": "^3.1.3",
"vue-infinite-scroll": "^2.0.2",
... ...
... ... @@ -703,6 +703,18 @@
"@types/unist" "*"
"@types/vfile-message" "*"
"@videojs/http-streaming@1.9.3":
version "1.9.3"
resolved "http://npm.yohops.com/@videojs%2fhttp-streaming/-/http-streaming-1.9.3.tgz#c971050495fb58d2b4c6ee0246bb03cc750635b1"
dependencies:
aes-decrypter "3.0.0"
global "^4.3.0"
m3u8-parser "4.3.0"
mpd-parser "0.7.0"
mux.js "5.1.1"
url-toolkit "^2.1.3"
video.js "^6.8.0 || ^7.0.0"
"@vue/component-compiler-utils@^2.5.1":
version "2.5.1"
resolved "http://npm.yohops.com/@vue%2fcomponent-compiler-utils/-/component-compiler-utils-2.5.1.tgz#bd9cf68d728324d7dcede80462c2c0e8fe090acb"
... ... @@ -886,6 +898,14 @@ address@>=0.0.1:
version "1.0.3"
resolved "http://npm.yohops.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
aes-decrypter@3.0.0:
version "3.0.0"
resolved "http://npm.yohops.com/aes-decrypter/-/aes-decrypter-3.0.0.tgz#7848a1c145b9fdbf57ae3e2b5b1bc7cf0644a8fb"
dependencies:
commander "^2.9.0"
global "^4.3.2"
pkcs7 "^1.0.2"
agentkeepalive@3.3.0:
version "3.3.0"
resolved "http://npm.yohops.com/agentkeepalive/-/agentkeepalive-3.3.0.tgz#6d5de5829afd3be2712201a39275fd11c651857c"
... ... @@ -2653,6 +2673,10 @@ dom-serializer@0:
domelementtype "~1.1.1"
entities "~1.1.1"
dom-walk@^0.1.0:
version "0.1.1"
resolved "http://npm.yohops.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
dom7@^2.1.2:
version "2.1.2"
resolved "http://npm.yohops.com/dom7/-/dom7-2.1.2.tgz#a914070c0abe8465384997a9c4f34475f67f75bd"
... ... @@ -2835,7 +2859,7 @@ error-stack-parser@^2.0.0:
dependencies:
stackframe "^1.0.4"
es-abstract@^1.12.0, es-abstract@^1.5.1:
es-abstract@^1.12.0, es-abstract@^1.5.0, es-abstract@^1.5.1:
version "1.13.0"
resolved "http://npm.yohops.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
dependencies:
... ... @@ -3393,6 +3417,12 @@ follow-redirects@^1.0.0, follow-redirects@^1.3.0:
dependencies:
debug "=3.1.0"
for-each@^0.3.3:
version "0.3.3"
resolved "http://npm.yohops.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
dependencies:
is-callable "^1.1.3"
for-in@^0.1.3:
version "0.1.8"
resolved "http://npm.yohops.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
... ... @@ -3495,7 +3525,7 @@ fstream@^1.0.0, fstream@^1.0.2:
mkdirp ">=0.5 0"
rimraf "2"
function-bind@^1.1.1:
function-bind@^1.0.2, function-bind@^1.1.1:
version "1.1.1"
resolved "http://npm.yohops.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
... ... @@ -3645,6 +3675,20 @@ global-prefix@^3.0.0:
kind-of "^6.0.2"
which "^1.3.1"
global@4.3.2, global@~4.3.0:
version "4.3.2"
resolved "http://npm.yohops.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
dependencies:
min-document "^2.19.0"
process "~0.5.1"
global@^4.3.0, global@^4.3.1, global@^4.3.2:
version "4.4.0"
resolved "http://npm.yohops.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
dependencies:
min-document "^2.19.0"
process "^0.11.10"
globals@^11.1.0, globals@^11.7.0:
version "11.10.0"
resolved "http://npm.yohops.com/globals/-/globals-11.10.0.tgz#1e09776dffda5e01816b3bb4077c8b59c24eaa50"
... ... @@ -4161,6 +4205,10 @@ indexof@0.0.1:
version "0.0.1"
resolved "http://npm.yohops.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
individual@^2.0.0:
version "2.0.0"
resolved "http://npm.yohops.com/individual/-/individual-2.0.0.tgz#833b097dad23294e76117a98fb38e0d9ad61bb97"
inflight@^1.0.4:
version "1.0.6"
resolved "http://npm.yohops.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
... ... @@ -4310,7 +4358,7 @@ is-builtin-module@^1.0.0:
dependencies:
builtin-modules "^1.0.0"
is-callable@^1.1.4:
is-callable@^1.1.3, is-callable@^1.1.4:
version "1.1.4"
resolved "http://npm.yohops.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
... ... @@ -4415,6 +4463,10 @@ is-fullwidth-code-point@^3.0.0:
version "3.0.0"
resolved "http://npm.yohops.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
is-function@^1.0.1:
version "1.0.1"
resolved "http://npm.yohops.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
is-glob@^2.0.0:
version "2.0.1"
resolved "http://npm.yohops.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
... ... @@ -4699,6 +4751,10 @@ jsprim@^1.2.2:
json-schema "0.2.3"
verror "1.10.0"
keycode@^2.2.0:
version "2.2.0"
resolved "http://npm.yohops.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
keygrip@~1.0.3:
version "1.0.3"
resolved "http://npm.yohops.com/keygrip/-/keygrip-1.0.3.tgz#399d709f0aed2bab0a059e0cdd3a5023a053e1dc"
... ... @@ -5079,6 +5135,12 @@ lru-cache@^5.1.1:
dependencies:
yallist "^3.0.2"
m3u8-parser@4.3.0:
version "4.3.0"
resolved "http://npm.yohops.com/m3u8-parser/-/m3u8-parser-4.3.0.tgz#4b4e988f87b6d8b2401d209a1d17798285a9da04"
dependencies:
global "^4.3.2"
make-dir@^1.0.0:
version "1.3.0"
resolved "http://npm.yohops.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
... ... @@ -5302,6 +5364,12 @@ mimic-fn@^1.0.0:
version "1.2.0"
resolved "http://npm.yohops.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
min-document@^2.19.0:
version "2.19.0"
resolved "http://npm.yohops.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
dependencies:
dom-walk "^0.1.0"
mini-css-extract-plugin@^0.5.0:
version "0.5.0"
resolved "http://npm.yohops.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0"
... ... @@ -5425,6 +5493,13 @@ move-concurrently@^1.0.1:
rimraf "^2.5.4"
run-queue "^1.0.3"
mpd-parser@0.7.0:
version "0.7.0"
resolved "http://npm.yohops.com/mpd-parser/-/mpd-parser-0.7.0.tgz#d36e3322579fce23d657f71a3c2f3e6cc5ce4002"
dependencies:
global "^4.3.2"
url-toolkit "^2.1.1"
ms@0.7.1:
version "0.7.1"
resolved "http://npm.yohops.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
... ... @@ -5461,6 +5536,10 @@ mute-stream@0.0.7:
version "0.0.7"
resolved "http://npm.yohops.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
mux.js@5.1.1:
version "5.1.1"
resolved "http://npm.yohops.com/mux.js/-/mux.js-5.1.1.tgz#0e95f048b4ac51d413c9ddc2d78e4cefad8d06de"
nan@^2.10.0, nan@^2.9.2:
version "2.12.1"
resolved "http://npm.yohops.com/nan/-/nan-2.12.1.tgz#7b1aa193e9aa86057e3c7bbd0ac448e770925552"
... ... @@ -6033,6 +6112,13 @@ parse-entities@^1.0.2, parse-entities@^1.1.0:
is-decimal "^1.0.0"
is-hexadecimal "^1.0.0"
parse-headers@^2.0.0:
version "2.0.2"
resolved "http://npm.yohops.com/parse-headers/-/parse-headers-2.0.2.tgz#9545e8a4c1ae5eaea7d24992bca890281ed26e34"
dependencies:
for-each "^0.3.3"
string.prototype.trim "^1.1.2"
parse-json@^2.2.0:
version "2.2.0"
resolved "http://npm.yohops.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
... ... @@ -6170,6 +6256,10 @@ pirates@^4.0.0:
dependencies:
node-modules-regexp "^1.0.0"
pkcs7@^1.0.2:
version "1.0.2"
resolved "http://npm.yohops.com/pkcs7/-/pkcs7-1.0.2.tgz#b6dba527528c2942bfc122ce2dafcdb5e59074e7"
pkg-dir@^2.0.0:
version "2.0.0"
resolved "http://npm.yohops.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
... ... @@ -6641,6 +6731,10 @@ process@^0.11.10:
version "0.11.10"
resolved "http://npm.yohops.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
process@~0.5.1:
version "0.5.2"
resolved "http://npm.yohops.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
progress@^2.0.0:
version "2.0.3"
resolved "http://npm.yohops.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
... ... @@ -7238,6 +7332,12 @@ run-queue@^1.0.0, run-queue@^1.0.3:
dependencies:
aproba "^1.1.1"
rust-result@^1.0.0:
version "1.0.0"
resolved "http://npm.yohops.com/rust-result/-/rust-result-1.0.0.tgz#34c75b2e6dc39fe5875e5bdec85b5e0f91536f72"
dependencies:
individual "^2.0.0"
rxjs@^6.1.0:
version "6.3.3"
resolved "http://npm.yohops.com/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55"
... ... @@ -7258,6 +7358,12 @@ safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, s
version "5.1.2"
resolved "http://npm.yohops.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
safe-json-parse@4.0.0:
version "4.0.0"
resolved "http://npm.yohops.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz#7c0f578cfccd12d33a71c0e05413e2eca171eaac"
dependencies:
rust-result "^1.0.0"
safe-regex@^1.1.0:
version "1.1.0"
resolved "http://npm.yohops.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
... ... @@ -7805,6 +7911,14 @@ string-width@^4.1.0:
is-fullwidth-code-point "^3.0.0"
strip-ansi "^5.2.0"
string.prototype.trim@^1.1.2:
version "1.1.2"
resolved "http://npm.yohops.com/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz#d04de2c89e137f4d7d206f086b5ed2fae6be8cea"
dependencies:
define-properties "^1.1.2"
es-abstract "^1.5.0"
function-bind "^1.0.2"
string_decoder@^1.0.0, string_decoder@^1.1.1:
version "1.2.0"
resolved "http://npm.yohops.com/string_decoder/-/string_decoder-1.2.0.tgz#fe86e738b19544afe70469243b2a1ee9240eae8d"
... ... @@ -8351,6 +8465,10 @@ tslib@^1.9.0:
version "1.9.3"
resolved "http://npm.yohops.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
tsml@1.0.1:
version "1.0.1"
resolved "http://npm.yohops.com/tsml/-/tsml-1.0.1.tgz#89f8218b9d9e257f47d7f6b56d01c5a4d2c68fc3"
tty-browserify@0.0.0:
version "0.0.0"
resolved "http://npm.yohops.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
... ... @@ -8617,6 +8735,10 @@ url-parse@^1.4.3:
querystringify "^2.0.0"
requires-port "^1.0.0"
url-toolkit@^2.1.1, url-toolkit@^2.1.3:
version "2.1.6"
resolved "http://npm.yohops.com/url-toolkit/-/url-toolkit-2.1.6.tgz#6d03246499e519aad224c44044a4ae20544154f2"
url@^0.11.0:
version "0.11.0"
resolved "http://npm.yohops.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
... ... @@ -8734,6 +8856,30 @@ vfile@^3.0.0:
unist-util-stringify-position "^1.0.0"
vfile-message "^1.0.0"
"video.js@^6.8.0 || ^7.0.0", video.js@^7.5.5:
version "7.5.5"
resolved "http://npm.yohops.com/video.js/-/video.js-7.5.5.tgz#322c321cb1e8ac55007f61f75f5dd928548fd4d2"
dependencies:
"@babel/runtime" "^7.2.0"
"@videojs/http-streaming" "1.9.3"
global "4.3.2"
keycode "^2.2.0"
safe-json-parse "4.0.0"
tsml "1.0.1"
videojs-font "3.1.0"
videojs-vtt.js "0.14.1"
xhr "2.4.0"
videojs-font@3.1.0:
version "3.1.0"
resolved "http://npm.yohops.com/videojs-font/-/videojs-font-3.1.0.tgz#ac33be9b517fe19299f61cccd2b3c7d75a1c6960"
videojs-vtt.js@0.14.1:
version "0.14.1"
resolved "http://npm.yohops.com/videojs-vtt.js/-/videojs-vtt.js-0.14.1.tgz#da583eb1fc9c81c826a9432b706040e8dea49911"
dependencies:
global "^4.3.1"
vm-browserify@0.0.4:
version "0.0.4"
resolved "http://npm.yohops.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
... ... @@ -9170,6 +9316,15 @@ xdg-basedir@^3.0.0:
version "3.0.0"
resolved "http://npm.yohops.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
xhr@2.4.0:
version "2.4.0"
resolved "http://npm.yohops.com/xhr/-/xhr-2.4.0.tgz#e16e66a45f869861eeefab416d5eff722dc40993"
dependencies:
global "~4.3.0"
is-function "^1.0.1"
parse-headers "^2.0.0"
xtend "^4.0.0"
xregexp@4.0.0:
version "4.0.0"
resolved "http://npm.yohops.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
... ...