Content of file index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!--

    *********************************************************************************************************************

    blueMarine II: Semantic Media Centre
    http://tidalwave.it/projects/bluemarine2

    Copyright (C) 2015 - 2021 by Tidalwave s.a.s. (http://tidalwave.it)

    *********************************************************************************************************************

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
    the License. You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
    an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations under the License.

    *********************************************************************************************************************

    git clone https://bitbucket.org/tidalwave/bluemarine2-src
    git clone https://github.com/tidalwave-it/bluemarine2-src

    *********************************************************************************************************************

-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TODO supply a title</title>
supply a title
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/bluemarine2.css"/> <script src="js/jquery.min.js"></script> <script src="js/handlebars.min.js"></script> <!--<script src="js/luga.common.min.js"></script>--> <script src="js/luga.min.js"></script> <script src="js/moment.min.js"></script> <script src="js/numeral.min.js"></script> <script> (function () { "use strict"; var baseUrl = "rest"; var recordFormatter = function(row, rowIndex, dataSet) { row.displayNameFormatted = row.displayName + ((typeof row.diskCount === 'undefined') ? "" : (" [" + row.diskNumber + "/" + row.diskCount + "]")); return row; }; var trackFormatter = function(row, rowIndex, dataSet) { row.durationFormatted = numeral(moment.duration(row.duration).asSeconds()).format('00:00'); row.trackNumberFormatted = ((typeof row.diskCount === 'undefined') ? "" : (row.diskNumber + ".")) + row.trackNumber + "."; return row; }; var recordsDs = new luga.data.JsonDataSet( { uuid: "records", url: baseUrl + "/record?source=musicbrainz", formatter: recordFormatter }); var recordDs = new luga.data.ChildJsonDataSet( { parentDataSet: recordsDs, uuid: "record", url: baseUrl + "/record/{id}?source=musicbrainz", formatter: recordFormatter }); var tracksDs = new luga.data.ChildJsonDataSet( { parentDataSet: recordsDs, uuid: "tracks", url: baseUrl + "/record/{id}?source=musicbrainz", path: "tracks", formatter: trackFormatter }); var trackDs = new luga.data.ChildJsonDataSet( { parentDataSet: tracksDs, uuid: "track", url: baseUrl + "/track/{id}?source=musicbrainz", formatter: trackFormatter }); jQuery(document).ready(function () { recordsDs.loadData(); }); }()); </script> <script id="recordTable" type="text/x-handlebars-template"> <table class="table table-bordered table-striped records"> <thead> </thead> <tbody> {{#each entities}} <tr> <td class="displayName"><a href="#" data-lugaregion-setrowid="{{lugaRowId}}" data-lugaregion-select="luga-docs-selected">{{displayNameFormatted}}</a></td> <td class="source">{{source}}</td> </tr> {{/each}} </tbody> </table> </script> <script id="trackTable" type="text/x-handlebars-template"> <table class="table table-bordered table-striped tracks"> <thead> </thead> <tbody> {{#each entities}} <tr> <td class="trackNumber">{{trackNumberFormatted}}</td> <td class="displayName"><a href="#" data-lugaregion-setrowid="{{lugaRowId}}" data-lugaregion-select="luga-docs-selected">{{displayName}}</a></td> <td class="duration">{{durationFormatted}}</td> <td class="source">{{source}}</td> </tr> {{/each}} </tbody> </table> </script> <script id="recordPane" type="text/x-handlebars-template"> {{#each entities}} <img class="coverArt" src="/rest/record/{{id}}/coverart" alt="cover art"></img> {{/each}} </script> <script id="trackPane" type="text/x-handlebars-template"> {{#each entities}} <!-- <span>Track:</span> <span class="displayName">{{displayName}}</span> --> <audio controls="" class="audioPlayer"> <source src="{{audioFile}}/content" type="audio/mpeg" /> Your browser does not support the audio element. </audio> {{/each}} </script> </head> <body> <table class="tableSection"> <tr> <td> <div data-lugaregion="true" data-lugaregion-datasource-uuid="records" data-lugaregion-template-id="recordTable"></div> </td> <td style="width: 40%; vertical-align: bottom"> <div data-lugaregion="true" data-lugaregion-datasource-uuid="record" data-lugaregion-template-id="recordPane"></div> <div data-lugaregion="true" data-lugaregion-datasource-uuid="track" data-lugaregion-template-id="trackPane"></div> </td> </tr> <tr> <td colspan="2"> <div data-lugaregion="true" data-lugaregion-datasource-uuid="tracks" data-lugaregion-template-id="trackTable"></div> </td> </tr> </table> </body> </html>