MrPetovan/friendica
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #2219 from fabrixxm/quattro

Browse source 
Fix video oembed appearance
This commit is contained in:
Tobias Diekershoff 2015-12-28 18:39:03 +01:00
parent 9a307a4e2b a1c1a6cae8
commit 03000beac6
11 changed files with 77 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
include/bbcode.php
View file

@ -301,14 +301,12 @@ function bb_onelinecode_cb($match) {
} }
function tryoembed($match){ function tryoembed($match){
//$url = ((count($match)==2)?$match[1]:$match[2]);
$url = $match[1]; $url = $match[1];
// Always embed the SSL version // Always embed the SSL version
$url = str_replace(array("http://www.youtube.com/", "http://player.vimeo.com/"), $url = str_replace(array("http://www.youtube.com/", "http://player.vimeo.com/"),
array("https://www.youtube.com/", "https://player.vimeo.com/"), $url); array("https://www.youtube.com/", "https://player.vimeo.com/"), $url);
//logger("tryoembed: $url");
$o = oembed_fetch_url($url); $o = oembed_fetch_url($url);
@ -318,7 +316,7 @@ function tryoembed($match){
if ($o->type=="error") return $match[0]; if ($o->type=="error") return $match[0];
$html = oembed_format_object($o); $html = oembed_format_object($o);
return $html; //oembed_iframe($html,$o->width,$o->height); return $html;
} }

14
include/oembed.php
View file

@ -1,12 +1,9 @@
<?php <?php
function oembed_replacecb($matches){ function oembed_replacecb($matches){
// logger('oembedcb');
$embedurl=$matches[1]; $embedurl=$matches[1];
$j = oembed_fetch_url($embedurl); $j = oembed_fetch_url($embedurl);
$s = oembed_format_object($j); $s = oembed_format_object($j);
return $s;//oembed_iframe($s,$j->width,$j->height); return $s;
} }
@ -144,15 +141,12 @@ function oembed_format_object($j){
} else { } else {
$ret=$jhtml; $ret=$jhtml;
} }
$ret.="<br>"; //$ret.="<br>";
}; break; }; break;
case "photo": { case "photo": {
$ret.= "<img width='".$j->width."' src='".proxy_url($j->url)."'>"; $ret.= "<img width='".$j->width."' src='".proxy_url($j->url)."'>";
//$ret.= "<img width='".$j->width."' height='".$j->height."' src='".proxy_url($j->url)."'>";
$ret.="<br>";
}; break; }; break;
case "link": { case "link": {
//$ret = "<a href='".$embedurl."'>".$j->title."</a>";
}; break; }; break;
case "rich": { case "rich": {
// not so safe.. // not so safe..
@ -194,10 +188,10 @@ function oembed_format_object($j){
} else { } else {
// add <a> for html2bbcode conversion // add <a> for html2bbcode conversion
$ret .= "<a href='$embedurl' rel='oembed'>$embedurl</a>"; $ret .= "<a href='$embedurl' rel='oembed'>$embedurl</a>";
$ret .= "<br style='clear:left'>";
} }
$ret.="</span>"; $ret.="</span>";
return mb_convert_encoding($ret, 'HTML-ENTITIES', mb_detect_encoding($ret)); $ret = str_replace("\n","",$ret);
return mb_convert_encoding($ret, 'HTML-ENTITIES', mb_detect_encoding($ret));
} }
function oembed_iframe($src,$width,$height) { function oembed_iframe($src,$width,$height) {

34
js/main.js
View file

@ -1,22 +1,22 @@
function resizeIframe(obj) { function resizeIframe(obj) {
obj.style.height = 0; //obj.style.height = 0;
_resizeIframe(obj, 0); _resizeIframe(obj, 0);
} }
function _resizeIframe(obj, desth) { function _resizeIframe(obj, desth) {
var h = obj.style.height; var h = obj.style.height;
var ch = obj.contentWindow.document.body.scrollHeight + 'px'; var ch = obj.contentWindow.document.body.scrollHeight + 'px';
if (h==ch) { if (h==ch) {
return; return;
}
console.log("_resizeIframe", obj, desth, ch);
if (desth!=ch) {
setTimeout(_resizeIframe, 500, obj, ch);
} else {
if (ch>0) obj.style.height = ch;
setTimeout(_resizeIframe, 1000, obj, ch);
}
} }
console.log("_resizeIframe", obj, desth, ch);
if (desth!=ch) {
setTimeout(_resizeIframe, 500, obj, ch);
} else {
obj.style.height = ch;
setTimeout(_resizeIframe, 1000, obj, ch);
}
}
function openClose(theID) { function openClose(theID) {
if(document.getElementById(theID).style.display == "block") { if(document.getElementById(theID).style.display == "block") {

6
mod/oembed.php
View file

@ -21,6 +21,12 @@ function oembed_content(&$a){
$url = base64url_decode($a->argv[1]); $url = base64url_decode($a->argv[1]);
$j = oembed_fetch_url($url); $j = oembed_fetch_url($url);
// workaround for media.ccc.de (and any other endpoint that return size 0)
if (substr($j->html, 0, 7) == "<iframe" && strstr($j->html, 'width="0"')) {
$j->html = '<style>html,body{margin:0;padding:0;} iframe{width:100%;height:100%;}</style>'. $j->html;
$j->html = str_replace('width="0"', '', $j->html);
$j->html = str_replace('height="0"', '', $j->html);
}
echo $j->html; echo $j->html;
// logger('mod-oembed ' . $j->html, LOGGER_ALL); // logger('mod-oembed ' . $j->html, LOGGER_ALL);
echo "</body></html>"; echo "</body></html>";

3
view/templates/oembed_video.tpl
View file

@ -1,5 +1,4 @@
<a class="embed_video" href='{{$embedurl}}' onclick='this.innerHTML=Base64.decode("{{$escapedhtml}}"); return false;'> <a class="embed_video" href='{{$embedurl}}' onclick='this.innerHTML=Base64.decode("{{$escapedhtml}}"); return false;'>
<img width='{{$tw}}' height='{{$th}}' src='{{$turl}}' > <img width='{{$tw}}' height='{{$th}}' src='{{$turl}}' >
<div style='position: absolute; top: 0px; left: 0px; width: {{$tw}}px; height: {{$th}}px; background: url({{$baseurl}}/images/icons/48/play.png) no-repeat center center;'></div> <div style='width: {{$tw}}px; height: {{$th}}px;'></div>
</a> </a>

4
view/theme/duepuntozero/style.css
View file

@ -1221,6 +1221,10 @@ input#dfrn-url {
} }
.type-link .oembed { .type-link .oembed {
} }
.oembed.video .embed_video > div {
position: absolute; top: 0px; left: 0px;
background: rgba(0, 0, 0, 0.5) url(shiny.png) no-repeat scroll center center;
}
.shared_header { .shared_header {
height: 32px; height: 32px;

13
view/theme/quattro/dark/style.css
View file

@ -463,7 +463,7 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
blockquote { blockquote {
background: #ffffff; background: #FFFFFF;
padding: 1em; padding: 1em;
margin-left: 1em; margin-left: 1em;
border-left: 1em solid #e6e6e6; border-left: 1em solid #e6e6e6;
@ -544,7 +544,6 @@ header {
margin: 0; margin: 0;
padding: 0; padding: 0;
/*width: 100%; height: 12px; */ /*width: 100%; height: 12px; */
z-index: 110; z-index: 110;
color: #ffffff; color: #ffffff;
} }
@ -922,7 +921,6 @@ aside .posted-date-selector-months {
overflow: auto; overflow: auto;
height: auto; height: auto;
/*.contact-block-div { width:60px; height: 60px; }*/ /*.contact-block-div { width:60px; height: 60px; }*/
} }
#contact-block .contact-block-h4 { #contact-block .contact-block-h4 {
float: left; float: left;
@ -1004,7 +1002,6 @@ aside .posted-date-selector-months {
margin-bottom: 2em; margin-bottom: 2em;
/*.action .s10 { width: 10px; overflow: hidden; padding: 0;} /*.action .s10 { width: 10px; overflow: hidden; padding: 0;}
.action .s16 { width: 16px; overflow: hidden; padding: 0;}*/ .action .s16 { width: 16px; overflow: hidden; padding: 0;}*/
} }
.widget h3 { .widget h3 {
padding: 0; padding: 0;
@ -1308,7 +1305,6 @@ section {
height: 32px; height: 32px;
margin-left: 16px; margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
} }
.comment-edit-preview .contact-photo-menu-button { .comment-edit-preview .contact-photo-menu-button {
top: 15px !important; top: 15px !important;
@ -1447,9 +1443,13 @@ blockquote.shared_content {
} }
.oembed.video > a.embed_video { .oembed.video > a.embed_video {
display: block; display: block;
float: none; float: left;
position: relative;
} }
.oembed.video > a.embed_video > div { .oembed.video > a.embed_video > div {
position: absolute;
top: 0px;
left: 0px;
background: rgba(255, 255, 255, 0.36) url(../../../images/icons/48/play.png) no-repeat center center !important; background: rgba(255, 255, 255, 0.36) url(../../../images/icons/48/play.png) no-repeat center center !important;
} }
/* threaded comments */ /* threaded comments */
@ -2241,7 +2241,6 @@ ul.tabs li .active {
min-height: 22px; min-height: 22px;
padding-top: 6px; padding-top: 6px;
/* a { display: block;}*/ /* a { display: block;}*/
} }
#photo-caption { #photo-caption {
display: block; display: block;

13
view/theme/quattro/green/style.css
View file

@ -463,7 +463,7 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
blockquote { blockquote {
background: #ffffff; background: #FFFFFF;
padding: 1em; padding: 1em;
margin-left: 1em; margin-left: 1em;
border-left: 1em solid #e6e6e6; border-left: 1em solid #e6e6e6;
@ -544,7 +544,6 @@ header {
margin: 0; margin: 0;
padding: 0; padding: 0;
/*width: 100%; height: 12px; */ /*width: 100%; height: 12px; */
z-index: 110; z-index: 110;
color: #ffffff; color: #ffffff;
} }
@ -922,7 +921,6 @@ aside .posted-date-selector-months {
overflow: auto; overflow: auto;
height: auto; height: auto;
/*.contact-block-div { width:60px; height: 60px; }*/ /*.contact-block-div { width:60px; height: 60px; }*/
} }
#contact-block .contact-block-h4 { #contact-block .contact-block-h4 {
float: left; float: left;
@ -1004,7 +1002,6 @@ aside .posted-date-selector-months {
margin-bottom: 2em; margin-bottom: 2em;
/*.action .s10 { width: 10px; overflow: hidden; padding: 0;} /*.action .s10 { width: 10px; overflow: hidden; padding: 0;}
.action .s16 { width: 16px; overflow: hidden; padding: 0;}*/ .action .s16 { width: 16px; overflow: hidden; padding: 0;}*/
} }
.widget h3 { .widget h3 {
padding: 0; padding: 0;
@ -1308,7 +1305,6 @@ section {
height: 32px; height: 32px;
margin-left: 16px; margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
} }
.comment-edit-preview .contact-photo-menu-button { .comment-edit-preview .contact-photo-menu-button {
top: 15px !important; top: 15px !important;
@ -1447,9 +1443,13 @@ blockquote.shared_content {
} }
.oembed.video > a.embed_video { .oembed.video > a.embed_video {
display: block; display: block;
float: none; float: left;
position: relative;
} }
.oembed.video > a.embed_video > div { .oembed.video > a.embed_video > div {
position: absolute;
top: 0px;
left: 0px;
background: rgba(255, 255, 255, 0.36) url(../../../images/icons/48/play.png) no-repeat center center !important; background: rgba(255, 255, 255, 0.36) url(../../../images/icons/48/play.png) no-repeat center center !important;
} }
/* threaded comments */ /* threaded comments */
@ -2241,7 +2241,6 @@ ul.tabs li .active {
min-height: 22px; min-height: 22px;
padding-top: 6px; padding-top: 6px;
/* a { display: block;}*/ /* a { display: block;}*/
} }
#photo-caption { #photo-caption {
display: block; display: block;

19
view/theme/quattro/lilac/style.css
View file

@ -420,7 +420,7 @@
body { body {
font-family: Liberation Sans, helvetica, arial, clean, sans-serif; font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
font-size: 11px; font-size: 11px;
background-color: #f6ecf9; background-color: #F6ECF9;
color: #2d2d2d; color: #2d2d2d;
margin: 50px 0 0 0; margin: 50px 0 0 0;
display: table; display: table;
@ -463,7 +463,7 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
blockquote { blockquote {
background: #ffffff; background: #FFFFFF;
padding: 1em; padding: 1em;
margin-left: 1em; margin-left: 1em;
border-left: 1em solid #e6e6e6; border-left: 1em solid #e6e6e6;
@ -544,7 +544,6 @@ header {
margin: 0; margin: 0;
padding: 0; padding: 0;
/*width: 100%; height: 12px; */ /*width: 100%; height: 12px; */
z-index: 110; z-index: 110;
color: #ffffff; color: #ffffff;
} }
@ -922,7 +921,6 @@ aside .posted-date-selector-months {
overflow: auto; overflow: auto;
height: auto; height: auto;
/*.contact-block-div { width:60px; height: 60px; }*/ /*.contact-block-div { width:60px; height: 60px; }*/
} }
#contact-block .contact-block-h4 { #contact-block .contact-block-h4 {
float: left; float: left;
@ -1004,7 +1002,6 @@ aside .posted-date-selector-months {
margin-bottom: 2em; margin-bottom: 2em;
/*.action .s10 { width: 10px; overflow: hidden; padding: 0;} /*.action .s10 { width: 10px; overflow: hidden; padding: 0;}
.action .s16 { width: 16px; overflow: hidden; padding: 0;}*/ .action .s16 { width: 16px; overflow: hidden; padding: 0;}*/
} }
.widget h3 { .widget h3 {
padding: 0; padding: 0;
@ -1308,7 +1305,6 @@ section {
height: 32px; height: 32px;
margin-left: 16px; margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
} }
.comment-edit-preview .contact-photo-menu-button { .comment-edit-preview .contact-photo-menu-button {
top: 15px !important; top: 15px !important;
@ -1447,9 +1443,13 @@ blockquote.shared_content {
} }
.oembed.video > a.embed_video { .oembed.video > a.embed_video {
display: block; display: block;
float: none; float: left;
position: relative;
} }
.oembed.video > a.embed_video > div { .oembed.video > a.embed_video > div {
position: absolute;
top: 0px;
left: 0px;
background: rgba(255, 255, 255, 0.36) url(../../../images/icons/48/play.png) no-repeat center center !important; background: rgba(255, 255, 255, 0.36) url(../../../images/icons/48/play.png) no-repeat center center !important;
} }
/* threaded comments */ /* threaded comments */
@ -1753,7 +1753,7 @@ span[id^="showmore-wrap"] {
height: 20px; height: 20px;
width: 500px; width: 500px;
font-weight: bold; font-weight: bold;
border: 1px solid #f6ecf9; border: 1px solid #F6ECF9;
} }
#jot #jot-title:-webkit-input-placeholder { #jot #jot-title:-webkit-input-placeholder {
font-weight: normal; font-weight: normal;
@ -1780,7 +1780,7 @@ span[id^="showmore-wrap"] {
margin: 0; margin: 0;
height: 20px; height: 20px;
width: 200px; width: 200px;
border: 1px solid #f6ecf9; border: 1px solid #F6ECF9;
} }
#jot #jot-category:hover { #jot #jot-category:hover {
border: 1px solid #999999; border: 1px solid #999999;
@ -2241,7 +2241,6 @@ ul.tabs li .active {
min-height: 22px; min-height: 22px;
padding-top: 6px; padding-top: 6px;
/* a { display: block;}*/ /* a { display: block;}*/
} }
#photo-caption { #photo-caption {
display: block; display: block;

6
view/theme/quattro/quattro.less
View file

@ -745,7 +745,7 @@ section {
margin: 1em 0; margin: 1em 0;
max-height: 160px; max-height: 160px;
overflow: hidden; overflow: hidden;
padding-left: 1em; padding-left: 1em;
} }
.oembed {} .oembed {}
} }
@ -780,8 +780,10 @@ blockquote.shared_content {
.oembed.video { .oembed.video {
> a.embed_video { > a.embed_video {
display: block; display: block;
float: none; float: left;
position: relative;
> div { > div {
position: absolute; top: 0px; left: 0px;
background: background:
rgba(255, 255, 255, 0.36) rgba(255, 255, 255, 0.36)
url(../../../images/icons/48/play.png) url(../../../images/icons/48/play.png)

19
view/theme/vier/style.css
View file

@ -2522,6 +2522,25 @@ blockquote {
display: block; display: block;
} }
.oembed.video .embed_video > div {
position: absolute; top: 0px; left: 0px;
background-color: rgba(0,0,0,0.5);
}
.oembed.video .embed_video > div::before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
vertical-align: top;
font-size: 3em;
content: "\f01d"; /* icon-play-circle */
color: #fff;
bottom: 10px;
right: 10px;
position: absolute;
}
/* ================== */ /* ================== */
/* = Contacts Block = */ /* = Contacts Block = */
/* ================== */ /* ================== */