Commit a748c6a3 authored by Gautam Chitnis's avatar Gautam Chitnis

Mixed :Equalizer component and styling cleanup

This commit adds the Equalizer component, sans functionality.
Also, styling from HTML has been removed and added to appropriate .scss files.

Gautam C.
parent 9eacd4cc
......@@ -39,13 +39,16 @@
</div>
</div>
<!-- Modal -->
<!-- Modals -->
<div id="vlmModal" class="modal fade" role="dialog">
<vlm-modal></vlm-modal>
</div>
<div id="fileModal" class="modal fade" role="dialog">
<file-modal></file-modal>
</div>
<div id="equalizerModal" class="modal fade" role="dialog">
<equalizer-modal></equalizer-modal>
</div>
</div>
<div id="videoPlayer" class="">
......@@ -59,10 +62,10 @@
<script type="text/x-template" id="playlist-template">
<div>
<playlist-buttons></playlist-buttons>
<div class="d-flex justify-content-center">
<h1 style="color: black; padding-left: 5%;">Playlist</h1>
<div>
<h1 class="playlistHeader">Playlist</h1>
</div>
<div id="playlist" style="background-color: white;">
<div id="playlist">
<ol type="1">
<li v-for="item in this.$parent.playlistItems">
<button v-on:click="play(item.src, item.id)" class="playlistItem">{{ item.title }}</button>
......@@ -83,6 +86,9 @@
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-random"></i></button>
<button type="button" class="btn-circle col-xs" id="repeatButton"><i class="glyphicon glyphicon-repeat"></i></button>
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-play-circle"></i></button>
</div>
<div class="row">
<button type="button" class="btn-circle col-xs" data-toggle="modal" data-target="#equalizerModal" onclick=""><i class="glyphicon glyphicon-equalizer"></i></button>
<button type="button" class="btn-circle col-xs" data-toggle="modal" data-target="#fileModal" onclick=""><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn-circle col-xs" id="removeButton"><i class="glyphicon glyphicon-trash"></i></button>
</div>
......@@ -96,15 +102,13 @@
<div id="sideNav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" id="closeNavButton">Menu</span></a>
<a href="#" data-toggle="modal" data-target="#fileModal" onclick="">Open File</a>
<!--<input type="file" id="videoInput"/>-->
<a href="#">Local Network</a>
<a href="#">Podcast</a>
<a href="#">Manage Streams</a>
<a href="#">Track Synchronization</a>
<a href="#" data-toggle="modal" data-target="#vlmModal" onclick="">VLM Batch Commands</a>
</div>
<span id= "openNavButton" style="color: orange;"><i class="glyphicon glyphicon-menu-hamburger"></i></span>
<span id="openNavButton"><i class="glyphicon glyphicon-menu-hamburger"></i></span>
</div>
</script>
......@@ -151,4 +155,24 @@
</div>
</div>
</script>
<!-- equalizer modal Template -->
<script type="text/x-template" id="equalizer-modal-template">
<div>
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Equalizer</h4>
</div>
<div class="modal-body" id="">
<input type="range" name="equalizer-input" id="equalizer-input" min="0" max="100"/>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</script>
</html>
......@@ -47,4 +47,8 @@
.glyphicon.glyphicon-menu-hamburger {
font-size: 2em;
}
#openNavButton{
color: orange;
}
\ No newline at end of file
import { notifyBus } from '../../services/bus.service.js';
import { sendCommand } from '../../services/command.service.js';
Vue.component('equalizer-modal', {
template: '#equalizer-modal-template',
methods: {
handleEvents: function()
{
$('#equalizer-input').on("click",function(){
console.log("here: ",this.value);
});
}
},
created: function() {
console.log("created");
this.handleEvents();
}
});
......@@ -32,30 +32,30 @@
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
/*font-size: 12px;*/
border-radius: 15px;
border: 0;
background-color: orange;
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
/*font-size: 12px;*/
border-radius: 15px;
border: 0;
background-color: orange;
}
.btn-circle.btn-lg {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
border-radius: 25px;
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
border-radius: 25px;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
border-radius: 35px;
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
border-radius: 35px;
}
.playlistItem {
......@@ -68,21 +68,28 @@
#playlist {
width:21.5%;
height: 100%;
background-color: white;
}
.playlistHeader{
color: black;
padding-left: 5%;
padding-right: 5%;
}
@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.playlistNav {
width: 0%;
}
.playlistNav {
width: 0%;
}
.playlistNavMobile {
visibility: visible;
height: 10%;
top: 50%;
}
.playlistNavMobile {
visibility: visible;
height: 10%;
top: 50%;
}
#playlist {
width: 95%;
height: 90%;
}
#playlist {
width: 95%;
height: 90%;
}
}
\ No newline at end of file
......@@ -6,6 +6,7 @@ Vue.component('vlm-modal', {
methods: {
executeVLM: function () {
var cmd = document.getElementById("vlm-command").value;
console.log(cmd);
sendCommand(2,"?command="+cmd);
//console.log(xmlData);
}
......
......@@ -22,7 +22,7 @@ export let playlist_types = [
];
$(function() { // Handler for .ready() called.
plyrInit();;
plyrInit();
vueInit();
$('#openNavButton').on('click',function (e){
......
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