https://www.romanticperiodpoetry.org/js/media.js

1// RPPA
2// Media tools
3
4// Editing popover: dismiss target and re-enable selectability
5$( document ).on( "click", ".popover-dismiss-select.med .cancel", async function(e) {
6    var iid = $( this ).data( "id" );
7    $( "[aria-describedby='"+$(this).closest('div.popover').attr( 'id')+"']" ).popover('dispose');
8    if ( dismiss_region ) { dismiss_region.remove(); }
9    player[ "player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid) ].enableDragSelection({
10        color: 'rgb(74, 186, 159,.2)',
11        resize: false,
12        drag: false
13    }); // sound
14});
15// Editing popover: save target and re-enable selectability
16$( document ).on( "click", ".popover-dismiss-select.med .save", async function(e) {
17    var tid = $( this ).data( "tid" );
18    var iid = $( this ).data( "id" );
19    $( "[aria-describedby='"+$(this).closest('div.popover').attr( 'id')+"']" ).popover('dispose');
20    createW3CannoMedia( iid, tid, $( this ).data("sel"), $( this ).data("ids"), $( this ).data("id"), $( this ).data("digo"), $( this ).data("work"), $( this ).data("expr"), $( this ).data("start"), $( this ).data("end"), $(this) );
21    player[ "player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid) ].enableDragSelection({
22        color: 'rgb(74, 186, 159,.2)',
23        resize: false,
24        drag: false
25    }); // sound
26});
27
28// Editing view: highlight building-block (i.e. play it)
29$(document ).on('mouseenter', '.bb-item.med label', function ( e ) {
30    var iid = $( this ).closest( "[data-iid]" ).data( "iid" );
31    var id = $( e.currentTarget ).prevAll( "input" ).attr( "id" );
32    if ( $( "button.active" ).data( "expr" ) != $( e.currentTarget ).closest( "[data-expr]" ).data( "expr" ) ) {
33        $( "button[data-expr='"+$( e.currentTarget ).closest( "[data-expr]" ).data( "expr" )+"']" ).trigger('click');
34    }
35    
36    if (!player[ "player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid) ].isPlaying()) {
37        player[ "player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid) ].regions.list[ id ].element.scrollIntoViewIfNeeded();
38    }
39    
40    }).on('mouseleave', '.bb-item.med label', function ( e ) {
41//    player[ "player_"+(mode == 'edit'?'editing_'+iid:iid) ].stop()
42});
43
44// Editing view: create, store, and process annotation
45/*  This function
46    - removes the building-block from the regions
47    - creates a building-block (RDF) and stores it in the graph
48    - creates a minimal live version of the building-block to list/highlight
49*/
50async function createW3CannoMedia( iid, tid, target, ids, obj_id, digo, work, expr, start, end, _this ) {
51    //console.log(  iid, tid, target, ids, obj_id, work, expr, start, end  );
52    var date = new Date();
53    player[ "player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid) ].regions.list[ ids ].remove();
54    var id = domain+`/id/`+uuidv4()+`/buildingblock`;
55    // add annotation
56    var liveanno = {};
57    liveanno.id = id;
58    liveanno.iid = iid;
59    liveanno.tid = tid;
60    liveanno["oa:hasTarget"] = [];
61    liveanno["oa:hasTarget"][0] = {};
62    liveanno["oa:hasTarget"][0]["oa:hasSelector"] = {};
63    liveanno["oa:hasTarget"][0]["oa:hasSelector"]["rdf:value"] = `t=`+Number(start).toFixed(2)+`,`+Number(end).toFixed(2);
64    liveanno['dcterms:isPartOf'] = {};
65    liveanno['dcterms:isPartOf'].id = expr;
66    liveanno['dcterms:isPartOf'].wid = work;
67    liveanno['dcterms:isPartOf'].oid = digo;
68    liveanno['skos:prefLabel'] = target;
69    if ( $( "[id='"+_this.data("id")+"']" ).closest( ".globalcontext" ).length ) {
70        bbs_context.append( processW3CannoMedia( liveanno ) );
71    } else {
72        bbs_text.append( processW3CannoMedia( liveanno ) );
73    }
74}
75
76// Editing view: create annotation list display and basic UI buttons
77function processW3CannoMedia( annotation ) {
78    var iid = annotation.iid;
79    var tid = annotation.tid;
80
81    bb_id = annotation.id;
82    if ( !player[ "player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid) ].regions.list.hasOwnProperty( bb_id ) ) {
83        var default_region = annotation["oa:hasTarget"][0]["oa:hasSelector"]["rdf:value"].split( 't=' )[1].split(',');
84        player[ "player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid) ].addRegion( {"id":bb_id,"drag":false,"resize":false,"start":default_region[0],"end":default_region[1],"color":randomColor(0.1)} );
85    }
86    return `<li class="bb-item med" data-iid="`+iid+`" data-ids="`+annotation["oa:hasTarget"][0]["oa:hasSelector"]["rdf:value"].split( "," )+`" data-expr="`+annotation['dcterms:isPartOf'].id+`" data-wid="`+annotation['dcterms:isPartOf'].wid+`" data-digo="`+annotation['dcterms:isPartOf'].oid+`">
87        <input type="checkbox" id="`+bb_id+`" name="`+bb_id+`">
88        <i class="far fa-trash-alt trash" style="cursor:pointer;"></i>
89        <label for="`+bb_id+`">`+
90        `<button class="btn btn-sm" style="--bs-btn-padding-y:.15rem;--bs-btn-padding-x:.45rem;--bs-btn-font-size:.75rem;vertical-align:top;" onclick="player[ '`+"player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid)+`' ].regions.list['`+annotation.id+`'].play()">
91            <i class="fa fa-play"></i>
92        </button>
93        <button class="btn btn-sm" style="--bs-btn-padding-y:.15rem;--bs-btn-padding-x:.45rem;--bs-btn-font-size:.75rem;vertical-align:top;" onclick="player[ '`+"player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid)+`' ].stop()">
94            <i class="fas fa-stop"></i>
95        </button>&nbsp;`
96        +annotation['skos:prefLabel'].replace(/&quot;/g,'"').replace(/(\\r\\n|\\n|\\r|\\t|\\f)/gm," / ")+`</label></li>` ;
97}
98
99// Editing view: delete annotation 
100$( document ).on( "click", ".bb-item.med .trash", async function(e) {
101    var iid = $( this ).closest( "[data-iid]" ).data( "iid" );
102    var id = $( this ).prev().attr( "id" );
103    //var update = namespaces+`\nWITH `+user+` DELETE { <`+id+`> ?p ?o . } WHERE { <`+id+`> ?p ?o . } ;\nWITH `+user+` DELETE { ?s ?p <`+id+`> . } WHERE { ?s ?p <`+id+`> . } `;
104    //await putTRIPLES( update );
105    player[ "player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid) ].regions.list[ id ].remove();
106    player[ "player_"+(mode == 'edit'?'editing_'+iid:(mode == 'view')?'viewing_'+iid:iid) ].stop();
107    $( this ).parent().remove();
108    //    processGlobalText( "", wid );
109});