client/templates/nodeeditor_video.html
author ymh <ymh.work@gmail.com>
Fri, 15 Sep 2017 14:04:42 +0200
changeset 657 50f5e8d2c839
parent 654 b2789b4cd389
permissions -rw-r--r--
add facebook as video provider for the video node type
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
657
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    38
function get_facebook_id(url) {
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    39
    var regExp = /^https?:\/\/www\.facebook\.com\/(?:video\.php\?v=\d+|.*?\/videos\/\d+)\/?$/;
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    40
    
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    41
    var match = url.match(regExp);
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    42
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    43
    if (match) {
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    44
        return encodeURIComponent(url);
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    45
    }
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    46
    return false;
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    47
}
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    48
654
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    49
%>
483
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    50
<h2>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    51
    <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
    52
    <% 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
    53
        <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
    54
    <% } %>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    55
    <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
    56
        <% 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
    57
            <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
    58
        <% } %>
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
    59
        <%=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
    60
        <% 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
    61
    </span>
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    62
</h2>
654
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    63
<% 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
    64
    var video_id = false;
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    65
    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
    66
        <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
    67
        <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
    68
    <%  }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    69
    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
    70
        <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
    71
        <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
    72
    <%  }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    73
    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
    74
        <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
    75
        <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
    76
    <%  }
657
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    77
    else if(video_id = get_facebook_id(node.uri)) { %>
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    78
        <iframe src="https://www.facebook.com/plugins/video.php?href=<%=video_id%>&width=255&show_text=false&height=143&appId" width="255" height="143" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    79
        <p><a href="<%-node.uri%>" target="_blank"><%-renkan.translate("Video link")%></a></p>
50f5e8d2c839 add facebook as video provider for the video node type
ymh <ymh.work@gmail.com>
parents: 654
diff changeset
    80
    <%  }
654
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    81
    else { %> 
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    82
        <video width="320" height="240" controls>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    83
            <source src="<%-node.uri%>" type="video/mp4">
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    84
        </video>
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    85
    <%  }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    86
    }
b2789b4cd389 add video embed for dailymotion, youtube, vimeo
ymh <ymh.work@gmail.com>
parents: 647
diff changeset
    87
%>
483
9bb08a2c2449 New nodeeditor html for video node type and update css to make the video fit the popup
rougeronj
parents:
diff changeset
    88
    <a href="#?idnode=<%-node._id%>"><%-renkan.translate("Link to the node")%></a>