Responsive Web Theatre

index.html

<div class="scene">
      <div id="room" class="cube">
        <div id="control-panel" class="panel">
            <div class="view active" id="home">
                <div class="view-head">
                    <h4>Welcome</h4>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <ul class="list">
                                <li class="list-item">
                                    <form class="full" data-action="youtube">
                                        <input type="text" class="form-control" placeholder="YouTube">
                                        <input type="submit" class="btn" value="Search">
                                    </form>
                                </li>
                                <li class="list-item">
                                    Settings
                                    <button class="btn right" data-action="settings"><i class="fas fa-cogs"></i></button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="view" id="youtube">
                <div class="view-head">
                    <h4>Youtube Search</h4>
                    <button class="btn right" data-action="home"><i class="fas fa-chevron-left"></i> Back</button>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <ul class="list">
                                <li class="list-item">
                                    <form class="full" data-action="youtube">
                                        <input type="text" class="form-control" placeholder="YouTube">
                                        <input type="submit" class="btn" value="Search">
                                    </form>
                                </li>
                            </ul>
                            <ul id="youtube-results" class="list">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="view" id="settings">
                <div class="view-head">
                    <h4>Settings</h4>
                    <button class="btn right" data-action="home"><i class="fas fa-chevron-left"></i> Back</button>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 ">
                            <label for="">Y Adjust</label>
                            <input class="slider" id="Y" data-for="Y" type="range" min="-30" max="30" step=".1">
                        </div>
                        <div class="col-md-6">
                            <label for="">X Adjust</label>
                            <input class="slider" id="X" data-for="X" type="range" min="-10" max="10" value="-10" step=".1">
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-sm-12">
                            <label for="">Depth</label>
                            <input class="slider" id="Depth" data-for="Z" type="range" min="0" max="150" value="0" step="1">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <label for="">Lights</label>
                            <input class="slider" id="Depth" data-for="L" type="range" min="10" max="80" value="150" step="1">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cube__face cube__face--back">
        </div>
        <div class="cube__face cube__face--back--fuax">
            <div class="wallscreen">
                <canvas class="wall canvas"></canvas>
                <div class="wall youtube"></div>
            </div>
        </div>
        <div class="cube__face cube__face--right"></div>
        <div class="cube__face cube__face--left"></div>
        <div class="cube__face cube__face--top"></div>
        <div class="cube__face cube__face--bottom"></div>
      </div>
    </div>

<script>
  // Inside the searchYoutube function:
function searchYoutube(q, options = {max: 50}) {
    return new Promise((res, rej) => {
        // ... (existing code)

        $.get(url, data, function (json) {
            if (json.items) {
                result.result = 1;
                result.items = json.items;
                
                // Clear the previous search results
                $('#youtube-results').empty();

                // Loop through the search results and append video elements
                json.items.forEach((video) => {
                    $('#youtube-results').append(`
                        <li class="list-item">
                            <a class="yt" data-action="play-video" data-value="${video.id.videoId}">
                                <img src="https://img.youtube.com/vi/${video.id.videoId}/default.jpg"/>
                                <div class="yt-right">
                                    <p>${video.snippet.title}</p>
                                </div>
                            </a>
                        </li>
                    `);
                });
            }

            // ... (existing code)
            res(result);
        });
    });
}

</script>

responsive-web-theatre.markdown

Responsive Web Theatre

A Pen by JFarrow on CodePen.

License.

script.js

var room;
var roomVector = {
    x: 0,
    y: 0,
    z: 100
}
var lights = 150;
var canvas;
var activeView = 'home';
var lastSearch = '';
var stack = [];

$(document).ready(function(){
    room = $('#room');
    canvas = $('canvas.main-canvas');
    
    $('#control-panel').on('click', 'a.yt', (e)=>{
        let element = e.currentTarget;
        let id = $(element).attr('data-value');
        console.log('play: '+id); 
        $('.wall.youtube').empty();
        $('.wall').removeClass('active');
        $('.wall.youtube')
            .addClass('active')
            .append(`<iframe width="100%" height="100%" src="https://www.youtube.com/embed/`+id+`?controls=0&autoplay=1" frameborder="0" autoplay="true"></iframe>`);
    });
    
    $('#control-panel').on('click', 'button.btn', (e)=>{
        let element = e.currentTarget;
        let action = $(element).attr('data-action');
        changeView(action);
        console.log('click', e);
    });
    
    $('#control-panel').on('submit','form',(e)=>{
        e.preventDefault();
        let element = e.currentTarget;
        let value = element.elements[0].value;
        let action = $(element).attr('data-action');
        if(value !== lastSearch){
            searchYoutube(value).then((data)=>{
                lastSearch = value;
                console.log(value, data);
                if(activeView !== action){
                    changeView(action);
                }
                $('#youtube-results').empty();
                data.items.forEach((video)=>{
                    $('#youtube-results').append(`
                    <li class="list-item">
                        <a class="yt" data-action="play-video" data-value="`+video.id.videoId+`">
                            <img src="https://img.youtube.com/vi/`+video.id.videoId+`/default.jpg"/>
                            <div class="yt-right">
                                <p>`+video.snippet.title+`</p>
                            </div>
                        </a>
                    </li>
                    `);
                });
            });
        }else{
            if(activeView !== action){
                changeView(action);
            }
        }
    })
    
    $(document).on('input', 'input[type="range"]', (e)=>{
        let element = e.currentTarget;
        let Id = $(element).attr('data-for');
        if(Id == 'X'){
            roomVector.x = parseFloat(element.value);
        }
        if(Id == 'Y'){
            roomVector.y = parseFloat(element.value);
        }
        if(Id == 'Z'){
            roomVector.z = parseInt(element.value);
        }
        if(Id == 'L'){
            lights = parseInt(element.value);
            $('.cube__face--right, .cube__face--back,  .cube__face--left,  .cube__face--top,   .cube__face--bottom').css({'filter': 'brightness('+lights+'%)'});
        }
        $(room).css('transform', 'translateZ(-'+roomVector.z+'px) rotateX('+roomVector.x+'deg) rotateY('+roomVector.y+'deg)')
        console.log(lights);
    });
});

function changeView(action){
    activeView = action;
    $('.view').removeClass('active');
    $('.view#'+action).addClass('active');
}

function searchYoutube(q, options = {max: 50}){
    
    return new Promise((res, rej)=>{
        var result = {
            result: 0,
            items: [],
            query: ''
        }

        // YouTube Data API base URL (JSON response)
        var url = "https://www.googleapis.com/youtube/v3/search"
        var data = {
            part: 'snippet',
            maxResults: options.max,
            q,
            type: 'video',
            key: 'AIzaSyDY2rs8pMNQEaTK8wUzQ8-MlWc7m-T0T9k'
        }

        result.query = url;

        $.get(url, data, function (json) {
            console.log(json);
            var count = 0;

            if (json.items) {
            result.result = 1;  
            result.items = json.items;

            }

            // Did YouTube return any search results?
            if (count === 0) {
            result.result = 0;
            }
            res(result);
        });
    })
}

style.css

body{
    margin: 0;
    padding: 0;
}

.scene{
    width: 100vw;
    height: 100vh;
    perspective: 1600px;
    background-color: black;
    overflow: hidden;
}

.cube{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}

.cube__face{
    position: absolute;
      width: 100%;
      height: 100%;
      line-height: 200px;
      font-size: 40px;
      font-weight: bold;
      color: white;
      text-align: center;
}

.wallscreen{
    position: absolute;
    top: 30px;
    left: 30px ;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    background-color: white;
    filter: brightness(100%);
}

.wall{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: top 2s ease-in-out;
}

.wall.active{
    top: 0;
    transition: top 2s ease-in-out;
}

.cube__face--right  { background: url('https://i.pinimg.com/originals/23/92/fc/2392fcbd96acae3783b0a9bae76ffbb7.jpg'); background-size: 500px ; }
.cube__face--back   { background: url('https://i.pinimg.com/originals/23/92/fc/2392fcbd96acae3783b0a9bae76ffbb7.jpg'); background-size: 500px ; }
.cube__face--left   { background: url('https://i.pinimg.com/originals/23/92/fc/2392fcbd96acae3783b0a9bae76ffbb7.jpg'); background-size: 500px ; }
.cube__face--top    { background: url('https://opengameart.org/sites/default/files/ceiling_tile_04_512.png'); background-size: 200px ; height: 100vw; }
.cube__face--bottom { 
    background: url('https://i.pinimg.com/originals/9d/ea/00/9dea0026f55b2023ead55030d3bc834b.jpg'); 
    background-size: 1000px;
    height: 100vw; 
    margin:calc( (100vh - 100vw) / 2) 0;
}

.cube__face--right  { transform: rotateY( 90deg) translateZ(calc(50vw)) rotateY(180deg); }
.cube__face--back,.cube__face--back--fuax { transform: rotateY(180deg) translateZ(calc(50vw)) rotatey(180deg); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(calc(50vw)) rotateY(180deg); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(calc(50vw)) rotateX(180deg); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(50vh)) rotateX(180deg); }

#youtube-results{
    overflow: auto;
    overflow-x: hidden;
    max-height: 180px;
}

a.yt{
    cursor: pointer;
    display: block;
}

a.yt img{
    width: 25%;
    display: inline-block;
    float: left;
}

a.yt .yt-right{
    display: inline-block;
    width: 75%;
    padding: 0px 0px 0px 10px;
}

.panel{
    position: absolute;
    width: 450px;
    height: 300px;
    border: 4px solid black;
    background-color: #555;
    transform: translateZ(1vw) translateX(calc(50vw - 50%)) translateY(calc(100vh - 320px)) rotateX(10deg);
    text-align: center;
    color: white;
    overflow: hidden;
    z-index: 1;
}

.panel .view{
    position: absolute;
    top: -100%;
    left: 0;
    height: 100%;
    width: 100%;
    transition: top .3s ease-in-out;
    font-size: 19px
}

.panel .view.active{
    top: 0;
    transition: top .3s ease-in-out;
}

.view-head{
    padding: 5px 15px;
    text-align: left;
}
.view-head h4{
    display: inline-block;
}

.view-head .btn.right{
    float: right;
}

ul.list{
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

ul.list li.list-item{
    padding: 10px;
    border-top: 1px solid;
    border-color: black;
}

ul.list li.list-item:last-child{
    border-bottom: 1px solid;
    border-color: black;
}

ul.list li.list-item .btn.right{
    float: right;
    margin: -5px 0;
}

.list-item form{
    display: inline-block;
    float: right;
    margin-top: -4px;
}

.list-item form.full{
    display: block;
    float: none;
    width: 100%;
    margin: 0;
}

input.form-control{
    display: inline-block !important;
    width: calc(100% - 80px) !important;
}

input[type="submit"]{
    vertical-align: top;
}

input#X{
    display: block;
    width: 100%;
}

input#Y{
    display: block;
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #444444;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}