{% load staticfiles %}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="{% static 'remie/css/style.css' %}" />
</head>
<body>
<div id="remie_player_container">
  <div id="media_panel">  
    <div id="player_container"></div>
    <div id="CurrentSegmentInfobox-Title_container"></div>
    <div id="LatestAnnotation_container"></div>
  </div>
  <div id="info_panel">
    <div id="CurrentSegmentInfobox_container"></div>
    <div id="CreateAnnotation_container"></div>
    <div id="AnnotationsController_container"></div>
    <div id="AnnotationsList_container"></div>
  </div>
  <script type="text/javascript" src='{% static "remie/metadataplayer/LdtPlayer-core.js" %}'></script>
  <script type="text/javascript">
    
    if (typeof jQuery == "undefined") {
        jQuery = IriSP.jQuery;
    }
    var metadatas = {metadata: {url: "{% url 'projectjson_id' id=project_id %}?from_display=false"}};
    var metadata_key = "metadata"; 
    
    IriSP.libFiles.defaultDir = '{% static "remie/js/" %}';
    IriSP.libFiles.inDefaultDir.jQuery = 'jquery.js';
    IriSP.libFiles.locations.jwPlayerSWF = '{% static "remie/swf/player.swf" %}';
    IriSP.libFiles.locations.recordMicSwf = '{% static "remie/swf/record_mic.swf" %}';
    IriSP.libFiles.locations.zeroClipboardSwf = '{% static "remie/swf/ZeroClipboard10.swf" %}';
    IriSP.libFiles.locations.cssjQueryUI = '{% static "remie/css/jq-css/themes/base/jquery-ui.css" %}';
    IriSP.language = 'fr-fr';
   
    IriSP.widgetsDir = '{% static "remie/metadataplayer" %}';
    var _metadata = {
        url: metadatas[metadata_key].url,
        format: 'ldt'
    };
    var _config = {
      container: 'player_container',
      css: '{% static "remie/metadataplayer/LdtPlayer-core.css" %}',
      default_options: {
          metadata: _metadata
      },
      widgets: 
      [
        {
            type: "AutoPlayer",
            streamer: function(_url) {
                var _matches = _url.match(/^[^\/]+\/\/[^\/]+\/[^\/]+\//);
                if (_matches) {
                  return _matches[0];
                } else {
                  return _url;
                }
            },
            url_transform: function(url) {
                // Adaptation to jwplayer 6
                if(url.substr(url.length - 4).toLowerCase()=='.flv'){
                    return url.replace('/ddc_player/video/','/ddc_player/flv:video/');
                }
                return url.replace('/ddc_player/video/','/ddc_player/mp4:video/');
            },
        	default_type: "AdaptivePlayer",
            autostart: false,
            adapt_to_device: true,
            width: window.innerWidth - 424
        },{
         	type: "Slider"
        },{
           	type: "Mediafragment"
        },{
            type: "Controller",
            disable_annotate_btn: true,
            disable_search_btn: true,
            disable_ctrl_f: true
        },{
            type: "Segments",
            annotation_type: "découpage",
            line_height: 24,
            overlap: 1,
            no_tooltip: true,
            use_timerange: true,
            scale_to_parent: false,
            
        },{
            type: "AnnotationsController",
            container: "AnnotationsController_container",
            display_or_write: false,
            starts_hidden: true,
            hide_without_segment: true,
            segments_annotation_type: "découpage",
            starting_widget: "AnnotationsList",
            toggle_widgets: false,
            hide_when_writing: true,
            custom_write_text: "Annoter ce segment",
        },{
            type: "CreateAnnotation",
            container: "CreateAnnotation_container",
            show_title_field : false,
            show_creator_field : false,
            show_time : false,
            start_visible : false,
            always_visible : false,
            show_slice : false,
            show_arrow : false,
            show_mic_record: false,
            show_mic_play: false,
            minimize_annotation_widget : true,
            creator_name : "{{current_user}}",
            creator_field_readonly: true,
            creator_avatar : "",
            tags : true, // This may be counterintuitive but this actually hides tag tool for the widget
            tag_titles : false,
            pause_on_write : true,
            max_tags : 8,
            polemics : false,
            annotation_type : "user_{{current_user}}",
            api_serializer : "ldt_annotate",
            api_endpoint_template : "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}",
            api_method : "POST",
            post_at_segment_time : true,
            segments_annotation_type: "découpage",
            after_send_timeout : 0,
            close_after_send: true,
            tag_prefix: "#",
            // Change id to a given project id
            project_id: "{{project_id}}",
            pause_when_displaying: true,
            custom_send_button: "Sauver",
            custom_description_placeholder: "Je rédige une annotation ...",
        },{
            type: "AnnotationsList",
            container: "AnnotationsList_container",
            api_users_endpoint: "{% url 'api_dispatch_list' resource_name='users' api_name='1.0' %}?username__in={% templatetag openvariable %}usernames_list_string{% templatetag closevariable %}&limit={% templatetag openvariable %}usernames_list_length{% templatetag closevariable %}",
            annotation_type: "user_",
            filter_by_segments: true,
            segments_annotation_type: "découpage",
            show_creation_date: true,
            show_only_annotation_from_user: false,
            show_timecode: false,
            show_title: false,
            show_creator: true,
            show_filters: true,
            keyword_filter: false,
            date_filter: false,
            segment_filter: false,
            latest_contributions_filter: true,
            show_header: true,
            custom_header: "Lister les annotations",
            annotations_count_header: false,
            annotations_count_header_string: "annotations sur ce segment",
            limit_count: false,
            start_visible: false,
            newest_first: true,
            tags: false,
            thumb_link_icon: true,
            hash_highlight: true,
            make_name_string_function: function(params){
                display_string = params.username;
                if (params.first_name && params.last_name){
                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
                }
                return display_string;
            },
            widget_max_height: window.innerHeight - 25 - 38 - 39 - 12 - 5 - 150
        },{
            type: "LatestAnnotation",
            annotation_type: "user_",
            api_users_endpoint: "{% url 'api_dispatch_list' resource_name='users' api_name='1.0' %}?username__in={% templatetag openvariable %}usernames_list_string{% templatetag closevariable %}&limit={% templatetag openvariable %}usernames_list_length{% templatetag closevariable %}",
            container: "LatestAnnotation_container",
           	filter_by_segment: true,
           	starts_hidden: true,
           	hide_without_segment: true,
           	segments_annotation_type: "découpage",
           	selectable_annotations: true,
           	copy_and_edit_button: true,
           	show_header: false,
           	make_name_string_function: function(params){
                display_string = params.username;
                if (params.first_name && params.last_name){
                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
                }
                return display_string;
            },
            widget_max_height: window.innerHeight - 25 - 38 - 39 - 12 - 5 - 150
        },{
         	type: "CurrentSegmentInfobox",
         	annotation_type: "découpage",
         	container: "CurrentSegmentInfobox_container",
         	empty_message: "Clique sur un segment pour ouvrir le chapitre",
         	pause_on_segment_end: true,
            empty_description_placeholder: "Pas de consigne sur ce segment ...",
            custom_title_container: "CurrentSegmentInfobox-Title_container"
        },{
            type: "Mediafragment"
        }
        
      ]
    }
    
    _myPlayer = new IriSP.Metadataplayer(_config);
	
  </script>
</div>
</body>
</html>