client/templates/nodeeditor_video.html
author ymh <ymh.work@gmail.com>
Wed, 13 Sep 2017 18:30:50 +0200
changeset 654 b2789b4cd389
parent 647 eaaa1efce396
child 657 50f5e8d2c839
permissions -rw-r--r--
add video embed for dailymotion, youtube, vimeo
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
654
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
     1
<%
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
     2
function get_youtube_id(url) {
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
     3
    var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
     4
    var match = url.match(regExp);
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
     5
    if (match && match[2].length == 11) {
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
     6
        return match[2];
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
     7
    } else {
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
     8
        return false;
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
     9
    }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    10
}
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    11
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    12
function get_vimeo_id(url) {
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    13
    var regExp = /https?:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/;
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    14
    
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    15
    var match = url.match(regExp);
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    16
    
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    17
    if (match){
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    18
        return match[2];
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    19
    } else {
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    20
        return false;
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    21
    }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    22
}
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    23
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    24
function get_dailymotion_id(url) {
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    25
    var regExp = /^(?:(?:http|https):\/\/)?(?:www.)?(dailymotion\.com|dai\.ly)\/((video\/([^_]+))|(hub\/([^_]+)|([^\/_]+)))$/;
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    26
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    27
    var match = url.match(regExp);
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    28
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    29
    if (match) {
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    30
        if(match[4] !== undefined) {
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    31
            return match[4];
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    32
        }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    33
        return match[2];
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    34
    }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    35
    return false;
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    36
}
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    37
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    38
%>
483
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    39
<h2>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    40
    <span class="Rk-CloseX">&times;</span>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    41
    <% if (options.show_node_tooltip_color) { %>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    42
        <span class="Rk-UserColor" style="background: <%-node.color%>;"></span>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    43
    <% } %>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    44
    <span class="Rk-Display-Title">
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    45
        <% if (node.uri) { %>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    46
            <a href="<%-node.uri%>" target="_blank">
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    47
        <% } %>
647
eaaa1efce396 add examples for youtube node types, add a way to open node urls with a single click
ymh <ymh.work@gmail.com>
parents: 483
diff changeset
    48
        <%=node.title%>
483
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    49
        <% if (node.uri) { %></a><% } %>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    50
    </span>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    51
</h2>
654
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    52
<% if (node.uri && options.show_node_tooltip_uri) {
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    53
    var video_id = false;
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    54
    if(video_id = get_youtube_id(node.uri)) { %>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    55
        <iframe width="255" height="143" src="https://www.youtube.com/embed/<%=video_id%>" frameborder="0"></iframe>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    56
        <p><a href="<%-node.uri%>" target="_blank"><%-renkan.translate("Link")%></a></p>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    57
    <%  }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    58
    else if(video_id = get_vimeo_id(node.uri)) { %>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    59
        <iframe src="https://player.vimeo.com/video/<%=video_id%>" width="255" height="143" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    60
        <p><a href="<%-node.uri%>" target="_blank"><%-renkan.translate("Link")%></a></p>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    61
    <%  }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    62
    else if(video_id = get_dailymotion_id(node.uri)) { %>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    63
        <iframe frameborder="0" width="255" height="143" src="https://www.dailymotion.com/embed/video/<%=video_id%>?autoPlay=0" allowfullscreen=""></iframe>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    64
        <p><a href="<%-node.uri%>" target="_blank"><%-renkan.translate("Link")%></a></p>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    65
    <%  }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    66
    else { %> 
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    67
        <video width="320" height="240" controls>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    68
            <source src="<%-node.uri%>" type="video/mp4">
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    69
        </video>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    70
    <%  }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    71
    }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    72
%>
483
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    73
    <a href="#?idnode=<%-node._id%>"><%-renkan.translate("Link to the node")%></a>