Commit a91843ad by Jonathan Thomas

Integrate text UI into Clip API

parent ad746e85
......@@ -27,10 +27,18 @@
<li><a v-if="index > 0" class="dropdown-item" href="#" @click="moveClipBtn('up', clip, index, index - 1)">Move Up</a></li>
<li><a v-if="index < clips.length - 1" class="dropdown-item" href="#" @click="moveClipBtn('down', clip, index, index + 1)">Move Down</a></li>
<li><hr class="dropdown-divider"></li>
<li><a v-if="!clip.json.hasOwnProperty('text')" class="dropdown-item" href="#" @click="AddTextBtn(clip)">Add Text</a></li>
<li><a v-if="clip.json.hasOwnProperty('text')" class="dropdown-item" href="#" @click="RemoveTextBtn(clip)">Remove Text</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" @click="deleteClipBtn(clip.id)">Delete</a></li>
</ul>
</div>
<!-- Clip text input -->
<div v-if="clip.json.hasOwnProperty('text')" class="mb-3 clip-text">
<input @blur="updateTextInput($event, clip)" type="text" class="form-control" placeholder="Enter text here" :value="clip.json.text">
</div>
<!-- Clip length label -->
<div ref="clip" class="clip-label">
{{ (clip.end - clip.start).toFixed(1) }} Seconds
......@@ -92,6 +100,21 @@ export default {
}
},
methods: {
AddTextBtn(clipObj) {
clipObj.json.text = ""
let payload = { data: clipObj }
this.editClip(payload)
},
RemoveTextBtn(clipObj) {
delete clipObj.json.text
let payload = { data: clipObj }
this.editClip(payload)
},
updateTextInput(e, clipObj) {
clipObj.json.text = e.target.value
let payload = { data: clipObj }
this.editClip(payload)
},
async startExport() {
let payload = {
"export_type": "video",
......@@ -221,13 +244,20 @@ export default {
padding: 3px;
opacity: 75%;
}
.export-btn {
.clip-text {
position: absolute;
width: 96%;
opacity: 80%;
bottom: 10%;
padding: 10px;
}
.export-btn {
float: right;
}
.dropdown-toggle {
}
.dropdown-toggle {
filter: drop-shadow(0px 0px 2px #000000);
}
.clip-badge {
}
.clip-badge {
position: absolute;
bottom: 5%;
left: 5%;
......@@ -235,9 +265,9 @@ export default {
opacity: 75%;
background-color: #000000;
border-radius: 4px;
}
video {
}
video {
background-color: #000000;
width: 100%;
}
}
</style>
\ No newline at end of file
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