Skip to content

M
mycard
Commit ff09c0dd authored by 神楽坂玲奈's avatar 神楽坂玲奈
Browse files
Options

Merge remote-tracking branch 'origin/dev' into dev 

# Conflicts:
#	app/cube-description/cube-description.component.ts
parents 3a6c98ea bd7df783
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 62 deletions
app/cube-description/cube-description.component.html
View file @ ff09c0dd
...@@ -3,18 +3,18 @@ ...@@ -3,18 +3,18 @@
<div class="left-box col-md-8"> <div class="left-box col-md-8">
<div class="left-big-item-box"> <div class="left-big-item-box">
<div style="width:100%; padding-bottom:56.25%;"></div> <div style="width:100%; padding-bottom:56.25%;"></div>
<!--<div class="left-big-item" [style.opacity]="divOpacity[key]" [style.display]="divOpacity[key]? 'block':'none'" *ngIf="videosrc.length">--> <!--单视频-->
<div class="left-big-item" [style.opacity]="selectId<videosrc.length ? 1:0" [style.display]="selectId<videosrc.length? 'block':'none'" *ngIf="videosrc.length">
<video controls="" name="video" (ended)="nextvedio(key)" autoplay="true" [src]="videosrc_now" type="video/webm">
</video>
</div>
<!--多视频-->
<!--<div *ngFor="let src of videosrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key]" [style.display]="divOpacity[key]? 'block':'none'">-->
<!--<video controls="" name="video" (ended)="nextvedio(key)" [autoplay]="!key">--> <!--<video controls="" name="video" (ended)="nextvedio(key)" [autoplay]="!key">-->
<!--<source [src]="src[0]" type="video/webm">--> <!--<source [src]="src[0]" type="video/webm">-->
<!--</video>--> <!--</video>-->
<!--&lt;!&ndash;<img [src]="src[0]"/>&ndash;&gt;-->
<!--</div>--> <!--</div>-->
<!--多视频-->
<div *ngFor="let src of videosrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key]" [style.display]="divOpacity[key]? 'block':'none'">
<video controls="" name="video" (ended)="nextvedio(key)" [autoplay]="!key">
<source [src]="src[0]" type="video/webm">
</video>
<!--<img [src]="src[0]"/>-->
</div>
<div *ngFor="let src of imgsrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key+videosrc.length]" [style.display]="divOpacity[key+videosrc.length]? 'block':'none'"> <div *ngFor="let src of imgsrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key+videosrc.length]" [style.display]="divOpacity[key+videosrc.length]? 'block':'none'">
<img class="img-fixed" [src]="src"/> <img class="img-fixed" [src]="src"/>
</div> </div>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<div style="overflow: auto; height:97px "> <div style="overflow: auto; height:97px ">
<div style="margin-right: -10000px; position: relative; float:left; padding-top: 10px"> <div style="margin-right: -10000px; position: relative; float:left; padding-top: 10px">
<div class="select-rectangle" [style.left]="(2+120*selectId)+'px'"></div> <div class="select-rectangle" [style.left]="(2+120*selectId)+'px'" ></div>
<div *ngFor="let src of videosrc ; index as key" class="left-small-item" (click)="select(key);" style="position: relative"> <div *ngFor="let src of videosrc ; index as key" class="left-small-item" (click)="select(key);" style="position: relative">
<img class="img-fixed" [src]="src[1]"/> <img class="img-fixed" [src]="src[1]"/>
......
app/cube-description/cube-description.component.ts
View file @ ff09c0dd
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
*/ */
import {Component, Input, OnChanges, SimpleChanges} from '@angular/core'; import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
import {Cube} from '../cube'; import {Cube} from '../cube';
import Timer = NodeJS.Timer;
@Component({ @Component({
...@@ -40,63 +41,68 @@ export class CubeDescriptionComponent implements OnChanges { ...@@ -40,63 +41,68 @@ export class CubeDescriptionComponent implements OnChanges {
imgsrc: string[]; imgsrc: string[];
divOpacity: number[]; divOpacity: number[];
selectId = 0; selectId = 0;
timeOutId: number; timeOutId: Timer;
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
if (changes.currentCube) { if (changes.currentCube) {
let trailer = this.currentCube.trailer; this.videosrc = [];
let videosrc = this.videosrc = []; this.imgsrc = [];
this.videosrc_now=""; this.divOpacity = [];
let imgsrc = this.imgs rc = [];
let divOpacity = this.divOpacity = [];
this.selectId = 0; this.selectId = 0;
for (let val of trailer) { for (let val of this.currentCube.trailer) {
if (val.type === 'video') { if (val.type === 'video') {
videosrc.push([val.url, val.url2]); this.videosrc.push([val.url, val.url2]);
} else if (val.type === 'image') { } else if (val.type === 'image') {
imgsrc.push(val.url); this.imgsrc.push(val.url);
} }
if (divOpacity.length) { if (this.divOpacity.length) {
divOpacity.push(0); this.divOpacity.push(0);
} else { } else {
divOpacity.push(1); this.divOpacity.push(1);
} }
} }
this.videosrc_now = this.videosrc[0] ? this.videosrc[0][0] : '';
} }
} }
nextvedio(key): void { // 多视频用
// nextvedio(key): void {
// console.log('nextvedio');
// let videos = document.getElementsByName('video');
// if (key + 1 < videos.length) {
// videos[key + 1].play();
// this.appear(key + 1);
// } else {
// this.nextpic(key);
// }
// }
// 单视频用
nextvedio(key: number): void {
console.log('nextvedio'); console.log('nextvedio');
let videos = document.getElementsByName('video'); let videosrc = this.videosrc;
if (key + 1 < videos.length) { if (key + 1 < videosrc.length) {
videos[key + 1].play(); this.videosrc_now = videosrc[key + 1][0];
this.appear(key + 1); console.log(videosrc);
} else { } else {
this.nextpic(key); this.nextpic(key);
} }
} }
nextpic(key): void { nextpic(key: number): void {
console.log('nextpic' + key); console.log('nextpic' + key);
let that = this; let that = this;
key = this.divOpacity.length > key + 1 ? key : this.videosrc.length - 1; key = this.divOpacity.length > key + 1 ? key : this.videosrc.length - 1;
this.appear(key + 1); this.appear(key + 1);
this.timeOutId = setTimeout(function () { this.timeOutId = setTimeout(function () {
that.nextpic(key + 1) that.nextpic(key + 1)
}, 1000); }, 5000);
}
test(v: number): void {
console.log(this.currentCube);
console.log(this.divOpacity);
console.log(v);
console.log(this.divOpacity[1])
} }
appear(key: number): void { appear(key: number): void {
console.log('appear' + key) console.log('appear' + key);
let divOpacity = this.divOpacity; let divOpacity = this.divOpacity;
this.selectId = key; this.selectId = key;
divOpacity.map(function (val, key2) { divOpacity.map(function (val, key2) {
...@@ -106,36 +112,38 @@ export class CubeDescriptionComponent implements OnChanges { ...@@ -106,36 +112,38 @@ export class CubeDescriptionComponent implements OnChanges {
} }
select(key: number): void { select(key: number): void {
console.log(this.currentCube);
clearTimeout(this.timeOutId); clearTimeout(this.timeOutId);
this.stop();
let videos = document.getElementsByName('video'); let videosrc = this.videosrc;
if (key < videos.length) { // this.stop();
videos[key].play(); let videos = <NodeListOf<HTMLVideoElement>>document.getElementsByName('video');
if (key < videosrc.length) {
this.videosrc_now = videosrc[key][0];
console.log(videosrc);
console.log(this.videosrc_now);
// videos[key].play();
videos[0].play();
this.appear(key); this.appear(key);
} else { } else {
this.nextpic(key - 1); this.nextpic(key - 1);
} }
// this.appear(key);
} }
play(key, ele) { //
console.log('play'); // play(key, ele) {
// console.log(key); // console.log('play');
// console.log(ele); // // console.log(key);
// if(!key){ // // console.log(ele);
// ele.play(); // // if(!key){
// } // // ele.play();
} // // }
// }
stop() {
let videos = document.getElementsByName('video'); // stop() {
for (let video of videos) { // let videos = document.getElementsByName('video');
console.log(video); // for (let video of videos) {
video.pause(); // console.log(video);
} // video.pause();
} // }
// }
} }
app/cube.ts
View file @ ff09c0dd
...@@ -34,7 +34,7 @@ export class Cube { ...@@ -34,7 +34,7 @@ export class Cube {
key?: string; key?: string;
// 宣传片 // 宣传片
trailer: { url: string, type: 'video' | 'image' }[]; trailer: { url: string, type: 'video' | 'image', url2?: string }[];
static downloadUrl(app: Cube, platform: string, locale: string): string { static downloadUrl(app: Cube, platform: string, locale: string): string {
if (app.id === 'ygopro') { if (app.id === 'ygopro') {
...@@ -272,7 +272,7 @@ export class CubeLocal { ...@@ -272,7 +272,7 @@ export class CubeLocal {
for (let [k, v] of Object.entries(this.files)) { for (let [k, v] of Object.entries(this.files)) {
t[k] = v; t[k] = v;
} }
return { path: this.path, version: this.version, files: t }; return {path: this.path, version: this.version, files: t};
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment