Skip to content

Commit 1b618d3

Browse files
author
Andressa Leal Cruz
committed
fix(Video): Merge
2 parents 8d5e591 + fab6656 commit 1b618d3

File tree

8 files changed

+201
-134
lines changed

8 files changed

+201
-134
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<div class="float" style="width: 150px">
3+
<div class="float" style="width: 200px">
44
<div>
55
<h1>Width:</h1>
66
<input v-model="width" >

‎src/components/DocumentSelect.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,10 @@ export default {
104104
<style lang="scss">
105105
@import '../styles/variables.scss';
106106
107+
.container.document-select {
108+
overflow: hidden;
109+
}
110+
107111
.document-select {
108112
109113
.header {

‎src/components/Editable.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export default {
33
template: '<div contenteditable="true" @input="update"></div>',
44
props: ['content'],
55
mounted: function () {
6-
this.$el.innerText = this.content
6+
this.$el.innerText = this.content || ''
77
},
88
methods: {
99
update: function (event) {

‎src/components/MediaLink.vue‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,9 @@
11
<template>
22
<div :class="'container media-link ' + document.type.split('/')[0]">
3-
<div v-if="editable && !isEditing" class="editIco" @click="toggleEdit">
4-
<img :src="editSvg" />
5-
</div>
6-
7-
<div v-if="isEditing" class="saveIco" @click="save(text)">
8-
<img :src="approveSvg" />
9-
</div>
103

11-
<div :class="'bubble ' + position">
12-
<blip-image :document="document" :position="position" :date="date" v-if="document.type.indexOf('image') != -1" :editable="editable" :isEditing="isEditing" />
13-
<blip-audio :document="document" :position="position" :date="date" v-if="document.type.indexOf('audio') != -1" :editable="editable" :isEditing="isEditing" />
14-
<blip-video :document="document" :position="position" :date="date" v-if="document.type.indexOf('video') != -1" :editable="editable" :isEditing="isEditing" />
15-
</div>
4+
<blip-image :document="document" :position="position" :date="date" v-if="document.type.indexOf('image') != -1" :editable="editable" :on-save="save" />
5+
<blip-audio :document="document" :position="position" :date="date" v-if="document.type.indexOf('audio') != -1" :editable="editable" :on-save="save" />
6+
<blip-video :document="document" :position="position" :date="date" v-if="document.type.indexOf('video') != -1" :editable="editable" :on-save="save" />
167

178
<div :class="'notification ' + position" v-if="date">
189
{{ date }}

‎src/components/MediaLink/Audio.vue‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,37 @@
11
<template>
2-
<div class="audio-player-wrapper">
3-
<div class="audio-player-controls">
4-
<span v-if="isPlaying" @click="togglePlay">
5-
<svg class="audio-player-button" width="12px" height="18px" viewBox="0 0 12 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
6-
<g id="Pause" stroke="none" stroke-width="1" fill-rule="nonzero">
7-
<path d="M4.61538462,17.351355 C4.61538462,17.7095549 4.33986449,18 4,18 L0.615384615,18 C0.275520128,18 0,17.7095885 0,17.351355 L0,0.648645015 C0,0.290411481 0.275520128,0 0.615384615,0 L4,0 C4.33986449,0 4.61538462,0.290411481 4.61538462,0.648645015 L4.61538462,17.351355 Z" id="Shape"></path>
8-
<path d="M12,17.351355 C12,17.7095549 11.7244799,18 11.3846154,18 L8,18 C7.66013551,18 7.38461538,17.7095885 7.38461538,17.351355 L7.38461538,0.648645015 C7.38461538,0.290411481 7.66013551,0 8,0 L11.3846154,0 C11.7244799,0 12,0.290411481 12,0.648645015 L12,17.351355 Z" id="Shape"></path>
2+
<div :class="'bubble ' + position">
3+
<div class="audio-player-wrapper">
4+
<div class="audio-player-controls">
5+
<span v-if="isPlaying" @click="togglePlay">
6+
<svg class="audio-player-button" width="12px" height="18px" viewBox="0 0 12 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
7+
<g id="Pause" stroke="none" stroke-width="1" fill-rule="nonzero">
8+
<path d="M4.61538462,17.351355 C4.61538462,17.7095549 4.33986449,18 4,18 L0.615384615,18 C0.275520128,18 0,17.7095885 0,17.351355 L0,0.648645015 C0,0.290411481 0.275520128,0 0.615384615,0 L4,0 C4.33986449,0 4.61538462,0.290411481 4.61538462,0.648645015 L4.61538462,17.351355 Z" id="Shape"></path>
9+
<path d="M12,17.351355 C12,17.7095549 11.7244799,18 11.3846154,18 L8,18 C7.66013551,18 7.38461538,17.7095885 7.38461538,17.351355 L7.38461538,0.648645015 C7.38461538,0.290411481 7.66013551,0 8,0 L11.3846154,0 C11.7244799,0 12,0.290411481 12,0.648645015 L12,17.351355 Z" id="Shape"></path>
10+
</g>
11+
</svg>
12+
</span>
13+
<span v-else @click="togglePlay">
14+
<svg class="audio-player-button" width="14px" height="18px" viewBox="0 0 14 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
15+
<g id="Play" stroke="none" stroke-width="1" fill-rule="evenodd">
16+
<path d="M13.3805199,7.82862117 C14.2064934,8.35374536 14.2064934,9.64760806 13.3805199,10.1700254 L1.21459333,17.8790651 C0.677273234,18.2201251 0,17.7992137 0,17.1238607 L0,0.876139285 C0,0.200786266 0.677273234,-0.220125134 1.21459333,0.120934907 L13.3805199,7.82862117 Z" id="play-copy-3"></path>
917
</g>
10-
</svg>
11-
</span>
12-
<span v-else @click="togglePlay">
13-
<svg class="audio-player-button" width="14px" height="18px" viewBox="0 0 14 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
14-
<g id="Play" stroke="none" stroke-width="1" fill-rule="evenodd">
15-
<path d="M13.3805199,7.82862117 C14.2064934,8.35374536 14.2064934,9.64760806 13.3805199,10.1700254 L1.21459333,17.8790651 C0.677273234,18.2201251 0,17.7992137 0,17.1238607 L0,0.876139285 C0,0.200786266 0.677273234,-0.220125134 1.21459333,0.120934907 L13.3805199,7.82862117 Z" id="play-copy-3"></path>
16-
</g>
17-
</svg>
18-
</span>
19-
<div class="audio-player-bar">
20-
<div class="slider" data-direction="horizontal" ref="audioSlider">
21-
<div class="progress" ref="audioProgress">
22-
<div class="pin" id="progress-pin" data-method="rewind"></div>
18+
</svg>
19+
</span>
20+
<div class="audio-player-bar">
21+
<div class="slider" data-direction="horizontal" ref="audioSlider">
22+
<div class="progress" ref="audioProgress">
23+
<div class="pin" id="progress-pin" data-method="rewind"></div>
24+
</div>
25+
</div>
26+
<input class="audio-player-range" type="range" :value="this.currentTime" :max="this.totalTime" @input="setAudioPosition($event)" @change="setAudioPosition($event)">
27+
<div class="audio-player-time">
28+
<span>{{getTimeFromSeconds(this.currentTime)}}</span>
29+
<span>{{getTimeFromSeconds(this.totalTime)}}</span>
2330
</div>
24-
</div>
25-
<input class="audio-player-range" type="range" :value="this.currentTime" :max="this.totalTime" @input="setAudioPosition($event)" @change="setAudioPosition($event)">
26-
<div class="audio-player-time">
27-
<span>{{getTimeFromSeconds(this.currentTime)}}</span>
28-
<span>{{getTimeFromSeconds(this.totalTime)}}</span>
2931
</div>
3032
</div>
3133
</div>
3234
</div>
33-
3435
</template>
3536

3637
<script>

‎src/components/MediaLink/Image.vue‎

Lines changed: 56 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,43 @@
11
<template>
2+
<div>
3+
<div v-if="editable && !isEditing" class="editIco" @click="toggleEdit">
4+
<img :src="editSvg" />
5+
</div>
6+
7+
<div :class="'bubble ' + position">
8+
<div class="header" :id="id" v-if="!isEditing">
9+
<a :href="document.uri" target="_blank">
10+
<div :class="'ratio ratio' + aspectRatio" :style="'background-image: url(' + previewUri + ')'">
11+
</div>
12+
</a>
213

3-
<div class="header" :id="id" v-if="!isEditing">
4-
<a :href="document.uri" target="_blank">
5-
<div :class="'ratio ratio' + aspectRatio" :style="'background-image: url(' + previewUri + ')'">
14+
<div class="title" v-if="title || text">
15+
<strong v-if="title" v-html="title"></strong>
16+
<span v-if="text" v-html="text"></span>
17+
</div>
618
</div>
7-
</a>
819

9-
<div class="title" v-if="title || text">
10-
<strong v-if="title" v-html="title"></strong>
11-
<span v-if="text" v-html="text"></span>
20+
<div v-else>
21+
<form>
22+
<div class="saveIco" @click="imgSave()">
23+
<img :src="approveSvg" />
24+
</div>
25+
<div class="form-group">
26+
<input type="text" class="form-control" v-model="preview" placeholder="Preview Uri" />
27+
</div>
28+
<div class="form-group">
29+
<input type="text" class="form-control" v-model="image" placeholder="Image Uri" />
30+
</div>
31+
<div class="form-group">
32+
<input type="text" class="form-control" v-model="title" placeholder="Title" />
33+
</div>
34+
<div class="form-group">
35+
<textarea v-model="text" class="form-control" placeholder="Text" />
36+
</div>
37+
</form>
38+
</div>
1239
</div>
1340
</div>
14-
15-
<div v-else>
16-
<input type="text" v-model="title" />
17-
<editable class="editable" :content="text" @update="text = $event"></editable>
18-
</div>
19-
2041
</template>
2142

2243
<script>
@@ -32,29 +53,44 @@ export default {
3253
return {
3354
id: guid(),
3455
title: this.document.title,
35-
text: this.document.text
56+
text: this.document.text,
57+
preview: this.document.previewUri,
58+
image: this.document.uri
3659
}
3760
},
3861
computed: {
3962
aspectRatio: function () {
4063
return this.document.aspectRatio ? this.document.aspectRatio.replace(':', '-') : '1-1'
4164
},
4265
previewUri: function () {
43-
return this.document.previewUri ? this.document.previewUri : this.document.uri
66+
return this.preview ? this.preview : this.image
67+
}
68+
},
69+
methods: {
70+
imgSave: function () {
71+
this.save({
72+
...this.document,
73+
title: this.title,
74+
text: this.text,
75+
previewUri: this.preview,
76+
uri: this.image
77+
})
4478
}
4579
},
4680
mounted: function () {
81+
console.log(JSON.stringify(this.document))
4782
let element = this.$el
48-
let container = element.parentNode.parentNode
49-
83+
let container = element.parentNode
5084
let width = parseInt(window.getComputedStyle(container).width.toString().replace('px', ''))
5185
86+
var bubble = element.querySelector('.bubble')
87+
5288
if (width <= 400) {
53-
element.style.width = width + 'px'
89+
bubble.style.width = width + 'px'
5490
} else if (width < 700) {
55-
element.style.width = (width / 2) + 'px'
91+
bubble.style.width = (width / 2) + 'px'
5692
} else {
57-
element.style.width = (width / 3) + 'px'
93+
bubble.style.width = (width / 3) + 'px'
5894
}
5995
}
6096
}

0 commit comments

Comments
 (0)