haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-18 00:00:00 +00:00
Code Issues Releases Wiki Activity

[video] show thumbnail for video files in dir-view/favorites/view-shared-dir pages

Browse Source
This commit is contained in:
llj
2017-04-19 16:21:33 +08:00
parent 4d3b1964f3
commit 3443479e75
7 changed files with 58 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
seahub/templates/js/templates.html
View File

@@ -437,7 +437,7 @@
</td> </td>
<td class="dirent-icon"> <td class="dirent-icon">
<div class="pos-rel"> <div class="pos-rel">
<% if (dirent.is_img) { %> <% if (dirent.is_img || dirent.is_video) { %>
<% if (dirent.encoded_thumbnail_src) { %> <% if (dirent.encoded_thumbnail_src) { %>
<img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" /> <img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
<% } else { %> <% } else { %>
@@ -532,7 +532,7 @@
</td> </td>
<td class="dirent-icon"> <td class="dirent-icon">
<div class="pos-rel"> <div class="pos-rel">
<% if (dirent.is_img) { %> <% if (dirent.is_img || dirent.is_video) { %>
<% if (dirent.encoded_thumbnail_src) { %> <% if (dirent.encoded_thumbnail_src) { %>
<img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" /> <img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
<% } else { %> <% } else { %>
@@ -605,7 +605,7 @@
<script type="text/template" id="grid-view-file-item-tmpl"> <script type="text/template" id="grid-view-file-item-tmpl">
<a href="<%= url %>" class="img-link" target="_blank"> <a href="<%= url %>" class="img-link" target="_blank">
<% if (dirent.is_img && dirent.encoded_thumbnail_src) { %> <% if ((dirent.is_img || dirent.is_video) && dirent.encoded_thumbnail_src) { %>
<img class="thumbnail vam" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" /> <img class="thumbnail vam" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
<% } else { %> <% } else { %>
<img src="<%= icon_url %>" width="96" alt="" class="vam" /> <img src="<%= icon_url %>" width="96" alt="" class="vam" />

12
seahub/templates/view_shared_dir.html
View File

@@ -79,7 +79,7 @@
{% for dirent in file_list %} {% for dirent in file_list %}
<tr class="file-item" data-name="{{dirent.obj_name}}" > <tr class="file-item" data-name="{{dirent.obj_name}}" >
{% if dirent.is_img %} {% if dirent.is_img or dirent.is_video %}
{% if dirent.encoded_thumbnail_src %} {% if dirent.encoded_thumbnail_src %}
<td class="alc"><img class="thumbnail" src="{{ SITE_ROOT }}{{ dirent.encoded_thumbnail_src }}" alt="{% trans "File"%}" /></td> <td class="alc"><img class="thumbnail" src="{{ SITE_ROOT }}{{ dirent.encoded_thumbnail_src }}" alt="{% trans "File"%}" /></td>
{% else %} {% else %}
@@ -130,18 +130,22 @@
<li class="file-item grid-item" data-name="{{dirent.obj_name}}" title="{{dirent.obj_name}}"> <li class="file-item grid-item" data-name="{{dirent.obj_name}}" title="{{dirent.obj_name}}">
{% if dirent.is_img %} {% if dirent.is_img %}
<a class="img-link img-img-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" data-mfp-src="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&raw=1"> <a class="img-link img-img-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" data-mfp-src="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&raw=1">
{% else %}
<a class="img-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">
{% endif %}
{% if dirent.is_img or dirent.is_video %}
{% if dirent.encoded_thumbnail_src %} {% if dirent.encoded_thumbnail_src %}
<img class="thumbnail vam" src="{{ SITE_ROOT }}{{ dirent.encoded_thumbnail_src }}" alt="" /> <img class="thumbnail vam" src="{{ SITE_ROOT }}{{ dirent.encoded_thumbnail_src }}" alt="" />
{% else %} {% else %}
<img class="not-thumbnail vam" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter:192 }}" alt="" width="96" /> <img class="not-thumbnail vam" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter:192 }}" alt="" width="96" />
{% endif %} {% endif %}
</a>
{% else %} {% else %}
<a class="img-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">
<img class="vam" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter:192 }}" alt="" width="96" /> <img class="vam" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter:192 }}" alt="" width="96" />
</a>
{% endif %} {% endif %}
</a>
{% if dirent.is_img %} {% if dirent.is_img %}
<a class="normal img-name-link text-link ellipsis" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" data-mfp-src="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&raw=1">{{ dirent.obj_name }}</a> <a class="normal img-name-link text-link ellipsis" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" data-mfp-src="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&raw=1">{{ dirent.obj_name }}</a>
{% else %} {% else %}

5
seahub/views/ajax.py
View File

@@ -342,8 +342,11 @@ def list_lib_dir(request, repo_id):
f_['perm'] = f.permission # perm for file in current dir f_['perm'] = f.permission # perm for file in current dir
file_type, file_ext = get_file_type_and_ext(f.obj_name) file_type, file_ext = get_file_type_and_ext(f.obj_name)
if file_type == IMAGE or file_type == VIDEO: # FIXME if file_type == IMAGE:
f_['is_img'] = True f_['is_img'] = True
if file_type == VIDEO:
f_['is_video'] = True
if file_type == IMAGE or file_type == VIDEO:
if not repo.encrypted and ENABLE_THUMBNAIL and \ if not repo.encrypted and ENABLE_THUMBNAIL and \
os.path.exists(os.path.join(THUMBNAIL_ROOT, str(size), f.obj_id)): os.path.exists(os.path.join(THUMBNAIL_ROOT, str(size), f.obj_id)):
file_path = posixpath.join(path, f.obj_name) file_path = posixpath.join(path, f.obj_name)

5
seahub/views/repo.py
View File

@@ -228,8 +228,11 @@ def view_shared_dir(request, fileshare):
if not repo.encrypted and ENABLE_THUMBNAIL: if not repo.encrypted and ENABLE_THUMBNAIL:
for f in file_list: for f in file_list:
file_type, file_ext = get_file_type_and_ext(f.obj_name) file_type, file_ext = get_file_type_and_ext(f.obj_name)
if file_type == IMAGE or file_type == VIDEO: # FIXME if file_type == IMAGE:
f.is_img = True f.is_img = True
if file_type == VIDEO:
f.is_video = True
if file_type == IMAGE or file_type == VIDEO:
if os.path.exists(os.path.join(THUMBNAIL_ROOT, str(thumbnail_size), f.obj_id)): if os.path.exists(os.path.join(THUMBNAIL_ROOT, str(thumbnail_size), f.obj_id)):
req_image_path = posixpath.join(req_path, f.obj_name) req_image_path = posixpath.join(req_path, f.obj_name)
src = get_share_link_thumbnail_src(token, thumbnail_size, req_image_path) src = get_share_link_thumbnail_src(token, thumbnail_size, req_image_path)

24
static/scripts/app/views/dir.js
View File

@@ -205,7 +205,7 @@ define([
this.updateDirOpBarUI(); // after `render_dirents_slice` this.updateDirOpBarUI(); // after `render_dirents_slice`
this.getImageThumbnail(); this.getThumbnail();
}, },
updateDirOpBarUI: function() { updateDirOpBarUI: function() {
@@ -316,20 +316,20 @@ define([
} }
}, },
getImageThumbnail: function() { getThumbnail: function() {
if (!app.pageOptions.enable_thumbnail || this.dir.encrypted) { if (!app.pageOptions.enable_thumbnail || this.dir.encrypted) {
return false; return false;
} }
var images_with_no_thumbnail = this.dir.filter(function(dirent) { var items = this.dir.filter(function(dirent) {
// 'dirent' is a model // 'dirent' is a model
return dirent.get('is_img') && !dirent.get('encoded_thumbnail_src'); return (dirent.get('is_img') || dirent.get('is_video')) && !dirent.get('encoded_thumbnail_src');
}); });
if (images_with_no_thumbnail.length == 0) { if (items.length == 0) {
return ; return ;
} }
var images_len = images_with_no_thumbnail.length, var items_length = items.length,
repo_id = this.dir.repo_id, repo_id = this.dir.repo_id,
cur_path = this.dir.path, cur_path = this.dir.path,
_this = this; _this = this;
@@ -338,24 +338,24 @@ define([
thumbnail_size = app.pageOptions.thumbnail_size_for_grid; thumbnail_size = app.pageOptions.thumbnail_size_for_grid;
} }
var get_thumbnail = function(i) { var get_thumbnail = function(i) {
var cur_img = images_with_no_thumbnail[i]; var cur_item = items[i];
var cur_img_path = Common.pathJoin([cur_path, cur_img.get('obj_name')]); var cur_item_path = Common.pathJoin([cur_path, cur_item.get('obj_name')]);
$.ajax({ $.ajax({
url: Common.getUrl({name: 'thumbnail_create', repo_id: repo_id}), url: Common.getUrl({name: 'thumbnail_create', repo_id: repo_id}),
data: { data: {
'path': cur_img_path, 'path': cur_item_path,
'size': thumbnail_size 'size': thumbnail_size
}, },
cache: false, cache: false,
dataType: 'json', dataType: 'json',
success: function(data) { success: function(data) {
cur_img.set({ cur_item.set({
'encoded_thumbnail_src': data.encoded_thumbnail_src 'encoded_thumbnail_src': data.encoded_thumbnail_src
}); });
}, },
complete: function() { complete: function() {
// cur path may be changed. e.g., the user enter another directory // cur path may be changed. e.g., the user enter another directory
if (i < images_len - 1 && if (i < items_length - 1 &&
_this.dir.repo_id == repo_id && _this.dir.repo_id == repo_id &&
_this.dir.path == cur_path) { _this.dir.path == cur_path) {
get_thumbnail(++i); get_thumbnail(++i);
@@ -1336,7 +1336,7 @@ define([
if (this.dir.dirent_more && if (this.dir.dirent_more &&
$(window).scrollTop() + $(window).height() == $(document).height()) { // scroll to the bottom $(window).scrollTop() + $(window).height() == $(document).height()) { // scroll to the bottom
this.render_dirents_slice(this.dir.last_start, this.dir.limit); this.render_dirents_slice(this.dir.last_start, this.dir.limit);
this.getImageThumbnail(); this.getThumbnail();
} }
// fixed 'dir-op-bar' // fixed 'dir-op-bar'

22
static/scripts/app/views/starred-file.js
View File

@@ -35,49 +35,49 @@ define([
this.renderThead(); this.renderThead();
this.starredFiles.each(this.addOne, this); this.starredFiles.each(this.addOne, this);
this.$table.show(); this.$table.show();
this.getImageThumbnail(); this.getThumbnail();
} else { } else {
this.$emptyTip.show(); this.$emptyTip.show();
this.$table.hide(); this.$table.hide();
} }
}, },
getImageThumbnail: function() { getThumbnail: function() {
if (!app.pageOptions.enable_thumbnail) { if (!app.pageOptions.enable_thumbnail) {
return false; return false;
} }
var images = this.starredFiles.filter(function(item) { var items = this.starredFiles.filter(function(item) {
// 'item' is a model // 'item' is a model
return Common.imageCheck(item.get('file_name')); return Common.imageCheck(item.get('file_name')) || Common.videoCheck(item.get('file_name'));
}); });
if (images.length == 0) { if (items.length == 0) {
return ; return ;
} }
var images_len = images.length; var items_len = items.length;
var thumbnail_size = app.pageOptions.thumbnail_default_size; var thumbnail_size = app.pageOptions.thumbnail_default_size;
var get_thumbnail = function(i) { var get_thumbnail = function(i) {
var cur_img = images[i]; var cur_item = items[i];
$.ajax({ $.ajax({
url: Common.getUrl({ url: Common.getUrl({
name: 'thumbnail_create', name: 'thumbnail_create',
repo_id: cur_img.get('repo_id') repo_id: cur_item.get('repo_id')
}), }),
data: { data: {
'path': cur_img.get('path'), 'path': cur_item.get('path'),
'size': thumbnail_size 'size': thumbnail_size
}, },
cache: false, cache: false,
dataType: 'json', dataType: 'json',
success: function(data) { success: function(data) {
cur_img.set({ cur_item.set({
'encoded_thumbnail_src': data.encoded_thumbnail_src 'encoded_thumbnail_src': data.encoded_thumbnail_src
}); });
}, },
complete: function() { complete: function() {
if (i < images_len - 1) { if (i < items_len - 1) {
get_thumbnail(++i); get_thumbnail(++i);
} }
} }

16
static/scripts/common.js
View File

@@ -720,6 +720,22 @@ define([
} }
}, },
// check if a file is a video
videoCheck: function (filename) {
// no file ext
if (filename.lastIndexOf('.') == -1) {
return false;
}
var file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
var exts = ['mp4', 'ogv', 'webm', 'mov'];
if (exts.indexOf(file_ext) != -1) {
return true;
} else {
return false;
}
},
compareTwoWord: function(a_name, b_name) { compareTwoWord: function(a_name, b_name) {
// compare a_name and b_name at lower case // compare a_name and b_name at lower case
// if a_name >= b_name, return 1 // if a_name >= b_name, return 1