Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #7902 from samjoch/bug-819062
Browse files Browse the repository at this point in the history 
Bug 819062-824626 - [Video List] Not Implemented to Spec in both orientations, Distorted thumbnail
  • Loading branch information
@daleharvey
daleharvey committed Feb 7, 2013
2 parents 04a7889 + 156206f commit 1f189d2
Show file tree
Hide file tree
Showing 4 changed files with 181 additions and 64 deletions.
164 changes: 140 additions & 24 deletions apps/video/js/video.js
View file
Expand Up @@ -99,40 +99,36 @@ function videoAdded(videodata) {

videoCount += 1;

var inner = document.createElement('div');
inner.className = 'inner';

if (videodata.metadata.poster) {
poster = document.createElement('img');
poster = document.createElement('div');
poster.className = 'img';
setPosterImage(poster, videodata.metadata.poster);
}

var title = document.createElement('p');
title.className = 'name';
title.textContent = videodata.metadata.title;

var duration = document.createElement('p');
duration.className = 'time';
var details = document.createElement('div');
details.className = 'details';
if (isFinite(videodata.metadata.duration)) {
var d = Math.round(videodata.metadata.duration);
duration.textContent = formatDuration(d);
details.dataset.after = formatDuration(d);
}
details.textContent = videodata.metadata.title;

var thumbnail = document.createElement('li');
if (poster) {
thumbnail.appendChild(poster);
inner.appendChild(poster);
}

if (!videodata.metadata.watched) {
var unread = document.createElement('div');
unread.classList.add('unwatched');
thumbnail.appendChild(unread);
inner.appendChild(unread);
}

thumbnail.appendChild(title);
thumbnail.appendChild(duration);
thumbnail.dataset.name = videodata.name;

var hr = document.createElement('hr');
thumbnail.appendChild(hr);

thumbnail.addEventListener('click', function(e) {
// When the user presses and holds to delete a video, we get a
// contextmenu event, but still apparently get a click event after
Expand All @@ -145,7 +141,10 @@ function videoAdded(videodata) {
ctxTriggered = false;
}
});
inner.appendChild(details);
thumbnail.appendChild(inner);
dom.thumbnails.appendChild(thumbnail);
textTruncate(details);
}

dom.thumbnails.addEventListener('contextmenu', function(evt) {
Expand Down Expand Up @@ -324,10 +323,11 @@ function getThumbnailDom(filename) {
}

function setPosterImage(dom, poster) {
dom.src = URL.createObjectURL(poster);
dom.onload = function() {
URL.revokeObjectURL(dom.src);
};
if (dom.dataset.uri) {
URL.revokeObjectURL(dom.dataset.uri);
}
dom.dataset.uri = URL.createObjectURL(poster)
dom.style.backgroundImage = 'url('+dom.dataset.uri+')';
}

function showOverlay(id) {
Expand Down Expand Up @@ -555,14 +555,14 @@ function hidePlayer() {
screenLock = null;
}

if (poster) {
var posterImg = li.querySelectorAll('img')[0];
var posterImg = li.querySelector('.img');
if (poster && posterImg) {
setPosterImage(posterImg, poster);
}

var unwatched = li.querySelectorAll('div.unwatched');
if (unwatched.length) {
li.removeChild(unwatched[0]);
var unwatched = li.querySelector('.unwatched');
if (unwatched) {
unwatched.parentNode.removeChild(unwatched);
}

videodb.updateMetadata(video.name, video.metadata, completeHidingPlayer);
Expand Down Expand Up @@ -732,6 +732,116 @@ function formatDuration(duration) {
return '';
}

function textTruncate(el) {

// Define helpers
var helpers = {
getLine: function h_getLine(letter) {
return parseInt((letter.offsetTop - atom.top) / atom.height) + 1;
},
hideLetter: function h_hideLetter(letter) {
letter.style.display = 'none';
},
after: function h_after(node, after) {
if (node.nextSibling) {
node.parentNode.insertBefore(after, node.nextSibling);
} else {
node.parentNode.appendChild(after);
}
}
};

var text = { el: el };

// Define real content before
if (!text.el.dataset.raw) {
text.el.dataset.raw = el.textContent;
}
text.el.innerHTML = text.el.dataset.raw;
delete text.el.dataset.visible;

var after = { el: document.createElement('span') };
after.el.className = 'after';
document.body.appendChild(after.el);

// Set positionable all letter
var t = text.el.innerHTML.replace(/(.)/g, '<span>$1</span>');
text.el.innerHTML = t;

// get atomic letter dimension
var atom = {
left: text.el.firstChild.offsetLeft,
top: text.el.firstChild.offsetTop,
width: text.el.firstChild.offsetWidth,
height: text.el.firstChild.offsetHeight
};

// Possible lines number
text.lines = (text.el.offsetHeight -
(text.el.offsetHeight) % atom.height) / atom.height;

// Prepare ... element to be append if necessary
var etc = document.createElement('span');
etc.innerHTML = '...';
after.el.appendChild(etc);

// Append duration this is required
var duration = document.createElement('span');
duration.innerHTML = text.el.dataset.after;
after.el.appendChild(duration);

// Init width left to include the after element
text.widthLeft = text.el.clientWidth;

// After element
after.width = after.el.offsetWidth;

// Each letter
var line;
var i = 0;
var children = text.el.children;
var space = document.createTextNode(' ');

while (children[i]) {
var letter = children[i];
if (letter.className == after.el.className) {
i++;
continue;
}
line = helpers.getLine(letter);
// If in last line truncate
if (text.lines == line) {
if (letter.textContent != ' ') {
// If enought space left to print after element
text.widthLeft -= letter.offsetWidth;
if (text.widthLeft - after.width < 3 * atom.width && !after.already) {
after.already = true;
helpers.after(letter, space);
helpers.after(letter, after.el);
after.el.insertBefore(space, after.el.lastChild);
} else if (after.already) {
helpers.hideLetter(letter);
}
}
} else if (text.lines <= line || after.already == true) {
helpers.hideLetter(letter);
}
i++;
}
// This can be optimized, for sure !
if (!after.already) {
if (text.lines > line) {
// Remove etc child from after element
after.el.removeChild(etc);
text.el.appendChild(after.el);
text.el.insertBefore(space, after.el);
} else {
after.el.style.display = 'none';
}
}
text.el.dataset.visible = 'true';
}


// The mozRequestFullScreen can fail silently, so we keep asking
// for full screen until we detect that it happens, We limit the
Expand Down Expand Up @@ -792,6 +902,12 @@ window.addEventListener('resize', function() {
if (dom.player.readyState !== HAVE_NOTHING) {
setPlayerSize();
}

// reTruncate text
var texts = document.querySelectorAll('.details');
for (var i = 0; i < texts.length; i++) {
textTruncate(texts[i]);
}
});

dom.player.addEventListener('timeupdate', timeUpdated);
Expand Down
Binary file added apps/video/style/images/background.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/video/style/images/unwatched.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 41 additions & 40 deletions apps/video/style/video.css
View file
@@ -1,73 +1,68 @@
html, body {
font-family: "MozTT", sans-serif;
height: 100%;
margin: 0;
padding: 0;
font-size: 10px;
background: black;
}

ul {
background: url(images/background.png);
height: 45.9rem;
padding: 0;
margin: 0;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(to bottom, #222 0%,#000 100%);
}
li {
margin: 0;
height: 120px;
width: 100%;
height: 12.1rem;
overflow: hidden;
position: relative;
list-style-type: none;
padding-bottom: 1px;
}
li .inner {
height: 12rem;
margin: 0 1.9rem 0 0;
border-bottom: 1px solid;
border-color:rgba(255,255,255, 0.1);
}
.unwatched {
width: 2px;
background: url(images/unwatched.png) no-repeat;
position: absolute;
top: 0px;
bottom: 0px;
background: #21a6b9;
bottom: 0;
width: 4px;
top: 0;
}
li img {
height: 120px;
width: 210px;
li .img {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 12rem;
width: 21rem;
overflow: hidden;
position: absolute;
left: 0;
margin: 0;
padding: 0;
}
li p {
display: block;
width: auto;
margin: 20px 10px 0 220px;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
}
li p.name {
color: #fff;
font-weight: 500;
font-size: 1.4rem;
}
li p.time {
margin-top: 4px;
li .details {
line-height: 1.6rem;
position: absolute;
margin: 1.6rem 0;
font-size: 1.4rem;
color: #95a3a6;
color: #fff;
width: 8rem;
height: 9.3rem;
top: 0;
right: 1.8rem;
visibility: hidden;
}
li:last-child hr {
display: none;
li .details[data-visible] {
visibility: visible;
}
li hr {
position: absolute;
bottom: -5px;
left: 210px;
right: 20px;
height: 0px;
border: 0;
border-bottom: 1px solid rgba(150, 150, 150, 0.1);
li .after span:last-child {
color: #95a3a6;
}

/* fullscreen video player */
Expand Down Expand Up @@ -380,6 +375,12 @@ header .icon:after {
top: 1rem;
}

@media (width: 480px) {
li .details {
width: 24rem;
}
}

@media screen and (width: 320px) {
#play, #play:after {
width: 5.6rem;
Expand Down

0 comments on commit 1f189d2

Please sign in to comment.