From: vincent@cubedesigners.com Date: Tue, 6 Jun 2017 14:59:08 +0000 (+0000) Subject: Compiler merges between html5video & master + hotfixes X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=400624280064b53e1e3950f8a97c6e445a92d195;p=cubeextranet.git Compiler merges between html5video & master + hotfixes --- diff --git a/inc/ws/Util/html5/html5video/class.ws.html5.compiler.php b/inc/ws/Util/html5/html5video/class.ws.html5.compiler.php index e0b512a28..a7ac6e215 100644 --- a/inc/ws/Util/html5/html5video/class.ws.html5.compiler.php +++ b/inc/ws/Util/html5/html5video/class.ws.html5.compiler.php @@ -11,6 +11,7 @@ class wsHTML5Compiler { 'js/libs/fix/detect-zoom.js', 'js/libs/cube/fb.js', 'js/libs/cube/util.js', + 'js/libs/fastclick/fastclick.js', 'js/libs/json.js', 'js/libs/flashdetect.js', 'js/libs/screenfull.js', diff --git a/inc/ws/Util/html5/master/class.ws.html5.compiler.php b/inc/ws/Util/html5/master/class.ws.html5.compiler.php index ee5f5b747..af926a146 100644 --- a/inc/ws/Util/html5/master/class.ws.html5.compiler.php +++ b/inc/ws/Util/html5/master/class.ws.html5.compiler.php @@ -24,6 +24,7 @@ class wsHTML5Compiler { 'js/libs/jquery/jquery.hashchange.js', 'js/libs/jquery/jquery.scrollto.js', 'js/libs/jquery/jquery.localscroll.js', + 'js/libs/jquery/perfect-scrollbar.jquery.js', 'js/libs/gsap/TweenMax.js', 'js/libs/gsap/jquery.gsap.js', 'js/libs/gal/gal.js', @@ -55,8 +56,9 @@ class wsHTML5Compiler { 'js/libs/fluidbook/fluidbook.audiodescription.js', 'js/libs/fluidbook/fluidbook.privacy.js', 'js/libs/fluidbook/fluidbook.zoom.js', - 'js/libs/fluidbook/views/fluidbook.chapters.js', - 'js/libs/fluidbook/views/fluidbook.index.js', + 'js/libs/fluidbook/fluidbook.menu.js', + 'js/libs/fluidbook/menu/fluidbook.chapters.js', + 'js/libs/fluidbook/menu/fluidbook.index.js', 'js/libs/fluidbook/fluidbook.js', 'js/main.js'); @@ -85,6 +87,12 @@ class wsHTML5Compiler { 'js/libs/jquery/jquery.transit.js', 'js/widget.js' ); + + // Collection of LESS files to be compiled + // Filename with no extension, relative to the /style directory in the player build folder + public $lessFiles = ['fluidbook']; + public $lessFilesExtras = []; // Extra files that will be copied when compiling LESS (eg. used to allow video-js-core.css to be copied) + public $specialCSS = array(); public $phonegapStandardPlugins = array('ios' => array('ExternalFileUtil'), 'android' => array('webintent')); @@ -149,6 +157,7 @@ class wsHTML5Compiler { protected $widget = true; protected $multiApp = false; protected $pageLabels = array(); + protected $stylesheets = array(); function __construct($book_id, $version = 'stable', $phonegap = false, $phonegapVersion = 'latest', $dir = null, $standalone = false, $appcache = false, $home = false) { @@ -280,17 +289,22 @@ class wsHTML5Compiler { } } - // Copy style folder - $from = $this->assets . '/style'; - $to = $this->vdir; + // Copy fonts folder + $from = $this->assets . '/style/fonts/*'; + $to = $this->vdir . '/style/fonts'; + if (!file_exists($to)) { + mkdir($to, 0777, true); + } `cp -p -r $from $to`; // Copy images folder $from = $this->assets . '/images'; + $to = $this->vdir; `cp -p -r $from $to`; // Copy images folder $from = $this->assets . '/video'; + $to = $this->vdir; `cp -p -r $from $to`; // Copy swf @@ -301,15 +315,12 @@ class wsHTML5Compiler { $this->loadPlugins(); $this->writeImages(); $linksCSS = $this->writeLinks(); - $numCSS = $this->writeCSS($this->vdir . '/data/style/style_%d.css', $linksCSS); + $this->writeCSS($this->vdir . '/data/style/style_%d.css', $linksCSS); $this->writeLangs(); - $this->writeIndex($numCSS); + $this->writeIndex(); $this->writeTexts(); $this->writeExtras(); $this->writeJs(); - if (!$this->widget) { - unlink($this->vdir . '/style/widget.css'); - } $this->writeCache(); } @@ -351,14 +362,18 @@ class wsHTML5Compiler { array_push($this->jsFiles, $main); } - protected function getVideosFormats($poster = true) { - if (!$this->phonegap) { - $res = array('ogv', 'webm', 'mp4', 'flv'); - } elseif ($this->phonegap == 'ios') { - $res = array('mp4'); - } else if ($this->phonegap == 'android') { - $res = array('webm', 'mp4'); - } + public function getVideosFormats($poster = true) { + $res = []; +// +// if (!$this->phonegap) { +// $res = array('ogv', 'webm', 'mp4', 'flv'); +// } elseif ($this->phonegap == 'ios') { +// $res = array('mp4'); +// } else if ($this->phonegap == 'android') { +// $res = array('webm', 'mp4'); +// } + + $res[] = 'mp4'; if ($poster) { $res[] = 'jpg'; @@ -415,6 +430,39 @@ class wsHTML5Compiler { file_put_contents($cacheFile, implode("\n", $lines)); } + /** + * Helper function to add a unique script entry to the JS stack. + * Normally this is a relative path but it can be an external URL. + * External URLs are added to the pluginJs collection instead of jsFiles. + * Duplicate paths are ignored. + * @param $path + */ + public function addJs($path) { + + // If JS is external, it will be included via the pluginJs collection + // Otherwise, it will be compiled into the main JS file + $collection = (preg_match('#^https?://#i', $path) === 1) ? 'pluginJs' : 'jsFiles'; + + if (!in_array($path, $this->$collection)) { + $this->{$collection}[] = $path; + } + } + + /** + * Helper function to add a unique stylesheet entry to the LESS stack for compilation + * Duplicate paths are ignored. + * @param $path The path of the file relative to the /style folder, without any extension + * @param $extra_files Optional array of extra files that should be copied across for use during LESS compilation + */ + public function addLess($path, $extra_files = []) { + if (!in_array($path, $this->lessFiles)) { + $this->lessFiles[] = $path; + } + + // Make sure no duplicates are added here either + $this->lessFilesExtras = array_unique(array_merge($this->lessFilesExtras, $extra_files)); + } + protected function writeIndex($numCSS) { global $core; @@ -451,11 +499,7 @@ class wsHTML5Compiler { $ga .= $this->book->parametres->googleAnalyticsCustom; } // Feuilles de style - $sheets = array('style/fluidbook.css'); - for ($i = 0; $i < $numCSS; $i++) { - $sheets[] = 'data/style/style_' . $i . '.css'; - } - $sheets = array_merge($sheets, $this->pluginCSS, $this->specialCSS); + $sheets = array_merge($this->stylesheets, $this->specialCSS); $style = array(); foreach ($sheets as $sheet) { @@ -692,12 +736,12 @@ class wsHTML5Compiler { if ($this->book->parametres->customLinkClass == 'WescoSalesLink') { $this->specialJsFiles[] = 'js/libs/fluidbook/special/wescosales.js'; - $this->specialCSS[] = 'style/special/wescosales.css'; + $this->specialCSS[] = 'wescosales'; } if ($this->book->parametres->customLinkClass == 'AtlanticDownloadLink') { $this->specialJsFiles[] = 'js/libs/fluidbook/special/atlanticdownload.js'; - $this->specialCSS[] = 'style/special/atlanticdownload.css'; + $this->specialCSS[] = 'atlanticdownload'; } $this->config->links = array(); @@ -1090,6 +1134,8 @@ class wsHTML5Compiler { protected function writeCSS($file, $links) { $res = array(); + $lessVariables = array(); + // General theme $cssWidth = $this->cssWidth; $cssHeight = $this->cssHeight; @@ -1242,17 +1288,15 @@ class wsHTML5Compiler { $menuColor->setAlpha(1); $menuTextColor = wsHTML5::colorToCSS($this->theme->parametres->subTextColor); + $lessVariables['menu-background'] = $menuColor->toCSS(); + $lessVariables['menu-text'] = $menuTextColor; + $lessVariables['menu-field-background'] = wsHTML5::colorToCSS($this->theme->parametres->subFieldColor); + $lessVariables['menu-field-text'] = wsHTML5::colorToCSS($this->theme->parametres->subTextFieldColor); + + $menuMultiply = $menuColor->multiply($menuColor); $menuMultiply2 = $menuMultiply->multiply($menuColor); - # View - $res[] = '.portrait .mview{width:' . $w . ';min-height:' . $h . '}'; - $res[] = '.landscape .mview{width:' . $w2 . ';min-height:' . $h . '}'; - $res[] = '.mview{background-color:' . $menuColor->toCSS() . ';color:' . $menuTextColor . ';}'; - - # Inner View - $res[] .= '#innerView>div{background-color:' . $menuColor->toCSS() . ';color:' . $menuTextColor . ';}'; - $res[] .= 'form input[type="text"],form input[type="email"]{background-color:' . wsHTML5::colorToCSS($this->theme->parametres->subFieldColor) . ';color:' . wsHTML5::colorToCSS($this->theme->parametres->subTextFieldColor) . ';}'; // Archives if ($this->book->parametres->externalArchivesBack) { @@ -1260,45 +1304,10 @@ class wsHTML5Compiler { $res[] = '.mview.archives{background-image:url("../images/' . $this->book->parametres->externalArchivesBack . '");}'; } - # Topbar - $top = $menuColor->toCSS(); - $bottom = $menuMultiply->toCSS(); - $border = $menuMultiply2->setAlpha(0.6)->toCSS(); - - $caption = ".mview .caption{ - background-image: -moz-linear-gradient(top, $top 0%, $bottom 100%); /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */ - background-image: -o-linear-gradient(top, $top 0%,$bottom 100%); /* Opera 11.10+ */ - background-image: -ms-linear-gradient(top, $top 0%,$bottom 100%); /* IE10+ */ - background-image: linear-gradient(top bottom, $top 0%,$bottom 100%); /* W3C */ -}"; - - $caption .= ".mview .caption a{ - border:1px solid $border; -}"; - $res[] = $caption; - - # Chapters (menu lists) - $top = $menuColor->setAlpha(0.5)->toCSS(); - $bottom = $menuMultiply->setAlpha(0.5)->toCSS(); - $border = $menuMultiply2->setAlpha(0.5)->toCSS(); - - $chapters = "ul.chapters a.level-1,ul.chapters a.level0,ul.chapters a.level1,ul.chapters a.level2,ul.chapters a.level3{ - background-image: -moz-linear-gradient(top, $top 0%, $bottom 100%); /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */ - background-image: -o-linear-gradient(top, $top 0%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */ - background-image: -ms-linear-gradient(top, $top 0%,$bottom 100%); /* IE10+ */ - background-image: linear-gradient(top bottom, $top 0%,$bottom 100%); /* W3C */ - border-bottom:1px solid $border; -}"; - $res[] = $chapters; # Index $ratio = $this->width / $this->height; $thumbh = round(100 / $ratio); - $res[] = '#indexView .thumb img{width:100px;height:' . $thumbh . 'px;}'; - $res[] = '#indexView .doubleThumb{height:' . $thumbh . 'px;' . wsHTML5::writeCSSUA('box-shadow', '0 0 3px ' . $shadowColor) . '}'; - $res[] = '#indexView .doubleThumb .overlay{height:' . $thumbh . 'px;}'; - $res[] = '#indexView .doubleThumb .hits.yes{background-color:' . wsHTML5::colorToCSS($this->theme->parametres->subSelectColor) . ';color:' . wsHTML5::colorToCSS($this->theme->parametres->subTextSelectColor) . '}'; + $lessVariables['thumb-height'] = $thumbh . 'px'; # Tooltip $res[] = '#tooltip{background-color:' . wsHTML5::colorToCSS($this->theme->parametres->tooltipBackColor) . ';color:' . wsHTML5::colorToCSS($this->theme->parametres->tooltipTextColor) . ';}'; @@ -1306,13 +1315,70 @@ class wsHTML5Compiler { # ZoomPopup close button background $res[] = '.zoomPopupClose {background-color:' . wsHTML5::colorToCSS($this->theme->parametres->couleurB) . ';}'; + + $this->_writeLess($lessVariables); + $res = array_chunk($res, 3500); foreach ($res as $k => $css) { + $this->stylesheets[] = 'data/style/style_' . $k . '.css'; file_put_contents(sprintf($file, $k), implode("\n", $css)); } return count($res); } + protected function _writeLess($variables) { + if ($this->widget) { + $this->lessFiles[] = 'widget'; + } + foreach ($this->specialCSS as $s) { + $this->lessFiles[] = 'special/' . $s; + } + + $tmp = CubeIT_Files::tmpdir(); + + copy($this->assets . '/style/variables.less', $tmp . '/variables.less'); + + $bookVariables = array(); + foreach ($variables as $k => $v) { + $bookVariables[] = '@' . $k . ':' . $v . ';'; + } + file_put_contents($tmp . '/book-variables.less', implode("\n", $bookVariables)); + + // Also copy any "extra" files that might be needed by LESS compilation + // (eg. video-js-core.css is needed by videojs.less) + foreach ($this->lessFilesExtras as $extra) { + $destination_extra = $tmp . '/' . $extra; + if (!is_dir(dirname($destination_extra))) mkdir(dirname($destination_extra)); + copy($this->assets . '/style/' . $extra, $destination_extra); + } + + foreach ($this->lessFiles as $f) { + + $source_less = $this->assets . '/style/' . $f . '.less'; + $destination_less = $tmp . '/' . $f . '.less'; + $destination_css = 'style/' . $f . '.css'; + + if (!file_exists($source_less)) continue; + + // LESS file might be in a subfolder, so create if it doesn't exist + if (!is_dir(dirname($destination_less))) mkdir(dirname($destination_less)); + // Generated CSS file might be in a subfolder, so create if it doesn't exist + if (!is_dir(dirname($this->vdir . '/' . $f . '.css'))) mkdir(dirname($this->vdir . '/' . $f . '.css')); + + // Less files must be copied to temporary directory so they'll + // have access to the variables generated in book-variables.less + copy($source_less, $destination_less); + $less = new CubeIT_CommandLine('lessc'); + $less->setArg('plugin', 'less-plugin-clean-css'); + $less->setArg(null, $destination_less); + $less->setArg(null, $this->vdir . '/' . $destination_css); + $less->execute(); + if ($f != 'widget') { + $this->stylesheets[] = $destination_css; + } + } + } + protected function _cssBackground() { $body = '#background,#splash{'; $body .= 'background-color:#' . $this->theme->parametres->backgroundColor . ';'; diff --git a/inc/ws/Util/html5/master/class.ws.html5.links.php b/inc/ws/Util/html5/master/class.ws.html5.links.php index 95c8df480..91111a9a7 100644 --- a/inc/ws/Util/html5/master/class.ws.html5.links.php +++ b/inc/ws/Util/html5/master/class.ws.html5.links.php @@ -361,10 +361,10 @@ class htmlMultimediaImage extends wsHTML5Link { } public function getHTMLContent() { - $w = $this->width * $this->getCssScale(); - $h = $this->height * $this->getCssScale(); + $w = $this->width; + $h = $this->height; $this->copyExternalFile($this->alternative); - $alt = ''; + $alt = ''; return $alt; } @@ -378,7 +378,7 @@ class htmlMultimediaPopupLink extends htmlMultimediaPopupImage { $i['width'] = $i['video_width']; $i['height'] = $i['video_height']; - $l = wsHTML5Link::getMultimediaInstance($this->id . '_content', $i, $this->compiler); + $l = self::getMultimediaInstance($this->id . '_content', $i, $this->compiler); $markup = $l->getHTMLContainer(); return ' data-multimedia="' . rawurlencode($markup) . '" '; } @@ -394,7 +394,7 @@ class htmlMultimediaPopupImage extends normalLink { public function getAdditionnalContent() { $dim = getimagesize($this->wdir . '/' . $this->alternative); - $markup = '
'; + $markup = '
'; return ' data-multimedia="' . rawurlencode($markup) . '" '; } @@ -507,42 +507,66 @@ class internalLink extends normalLink { class videoLink extends wsHTML5Link { + public static function addVideoJS($compiler) { + $compiler->addJs('js/libs/videojs/video.js'); + $compiler->addLess('videojs/videojs', ['videojs/video-js-core.css']); + } + + public function getClasses() { + return array_merge(['videoLink'], parent::getClasses()); + } + public function getHTMLContent() { + + static::addVideoJS($this->compiler); + $this->copyExternalFile($this->to, true); $w = round($this->width * $this->getCssScale()); $h = round($this->height * $this->getCssScale()); - return self::makeVideoTag($this, $w, $h, $this->compiler); + return $this->makeVideoTag($this, $w, $h, $this->compiler); } public static function makeVideoTag($linkDatas, $w = null, $h = null, $compiler = null) { - $file = $linkDatas->to; + + $attributes = static::getVideoAttributes($linkDatas, $w, $h, $compiler); + + $res = '
$value) { + $res .= " data-{$name}='{$value}'"; + } + $res .= '>
'; + + return $res; + } + + public static function getVideoAttributes($data, $w = null, $h = null, $compiler = null) { + + $file = $data->to; $e = explode('.', $file); $ext = array_pop($e); $basename = implode('.', $e); - $autoplay = ($linkDatas->video_auto_start ? '1' : '0'); - $controls = ($linkDatas->video_controls ? '1' : '0'); - $loop = ($linkDatas->video_loop ? '1' : '0'); - $sound = ($linkDatas->video_sound_on ? '1' : '0'); + $attr['name'] = $basename; + $attr['id'] = 'video_' . $data->id; + $attr['autoplay'] = ($data->video_auto_start ? '1' : '0'); + $attr['controls'] = ($data->video_controls ? '1' : '0'); + $attr['loop'] = ($data->video_loop ? '1' : '0'); + $attr['sound'] = ($data->video_sound_on ? '1' : '0'); - $res = '
book_id . '/' . $basename . '.jpg'; $dim = getimagesize($path); - $res .= 'data-width="' . $dim[0] . '" data-height="' . $dim[1] . '" '; + $attr['width'] = $dim[0]; + $attr['height'] = $dim[1]; } - $res .= ' data-autoplay="' . $autoplay . '"'; - $res .= ' data-controls="' . $controls . '"'; - $res .= ' data-loop="' . $loop . '"'; - $res .= ' data-sound="' . $sound . '"'; - $res .= ' data-name="' . $basename . '"'; - $res .= '>
'; - return $res; + + return $attr; } } @@ -560,7 +584,8 @@ class videoPopupLink extends normalLink { } public function getAdditionnalContent() { - return ' data-video="' . rawurlencode(videoLink::makeVideoTag($this, $this->video_width, $this->video_height, $this->compiler)) . '" '; + $this->video_auto_start = true; // Videos should always autoplay + return ' data-video="' . rawurlencode(videoLink::makeVideoTag($this, null, null, $this->compiler)) . '" '; } public function keep() { @@ -601,12 +626,85 @@ class audioPopupLink extends normalLink { class webVideoLink extends videoLink { + public static function getVideoAttributes($data, $w = null, $h = null, $compiler = null) { + $attributes = parent::getVideoAttributes($data, $w, $h, $compiler); + + // Since the admin interface doesn't offer options for setting controls or sound, we will set some defaults here + $attributes['controls'] = '1'; + $attributes['sound'] = '1'; + + $attributes['setup'] = static::getVideoSetup($data, $compiler); + + return $attributes; + } + + public static function getVideoSetup($data, $compiler) { + + static::addVideoJS($compiler); // Ensure videoJS core is included first + + switch ($data->video_service) { + case 0: // YouTube + $compiler->addJs('js/libs/videojs/Youtube.js'); + // $compiler->addJs('https://rawgit.com/videojs/videojs-youtube/master/dist/Youtube.js'); + $setup = [ + 'techOrder' => ['youtube'], + 'sources' => [ + [ + 'type' => 'video/youtube', + 'src' => 'https://www.youtube.com/watch?v=' . $data->to + ] + ] + ]; + break; + case 1: // Dailymotion + // Todo: add local version of script... + // Note: this plugin doesn't seem to work currently so it is not included + //$compiler->addJs('https://rawgit.com/benjipott/video.js-dailymotion/master/dist-test/videojs-dailymotion.js'); + $setup = [ + // 'techOrder' => ['dailymotion'], + // 'sources' => [ + // [ + // 'src' => 'http://www.dailymotion.com/video/' . $data->to + // ] + // ] + ]; + break; + case 2: // Vimeo + // Todo: add local version of script... + // Note: Vimeo plugin doesn't seem to be working currently - might need updates to work with latest VideoJS module + //$compiler->addJs('https://rawgit.com/videojs/videojs-vimeo/master/dist/videojs-vimeo.min.js'); + $setup = [ + // 'techOrder' => ['vimeo'], + // 'sources' => [ + // [ + // 'type' => 'vimeo/vimeo', + // 'src' => 'https://www.vimeo.com/' . $data->to + // ] + // ] + ]; + break; + default: + $setup = []; + } + + return json_encode($setup, JSON_UNESCAPED_SLASHES); + + } + public function getHTMLContent() { + + if ($this->video_service !== 0) { return $this->getEmbed(); } + $w = round($this->width * $this->getCssScale()); + $h = round($this->height * $this->getCssScale()); + + return $this->makeVideoTag($this, $w, $h, $this->compiler); + } + public function getEmbed() { - return ''; + return ''; } public function getEmbedURL() { @@ -615,6 +713,7 @@ class webVideoLink extends videoLink { } elseif ($this->video_service == 1) { $url = 'https://www.dailymotion.com/embed/video/' . $this->to; } elseif ($this->video_service == 2) { + //Todo: get vimeo embed URL $url = ''; } elseif ($this->video_service == 3) { list($playerId, $videoId) = explode('|', $this->to); @@ -751,12 +850,12 @@ class htmlMultimediaLink extends wsHTML5Link { $iw = $this->_config['width']; $ih = $this->_config['height']; - $res = ''; + $res = ''; } if (isset($externalIframe)) { $iw = $this->_config['width']; $ih = $this->_config['height']; - $res = ''; + $res = ''; } foreach ($this->_config['inject'] as $i) { @@ -882,17 +981,26 @@ class htmlMultimediaLink extends wsHTML5Link { class webVideoPopupLink extends videoPopupLink { + // public function getURL() { + // if ($this->video_service == 0) { + // $service = 'youtube'; + // } elseif ($this->video_service == 1) { + // $service = 'dailymotion'; + // } elseif ($this->video_service == 2) { + // $service = 'vimeo'; + // } elseif ($this->video_service == 3) { + // $service = 'brightcove'; + // } + // return '#/webvideo/' . $service . '/' . $this->to; + // } + public function getURL() { - if ($this->video_service == 0) { - $service = 'youtube'; - } elseif ($this->video_service == 1) { - $service = 'dailymotion'; - } elseif ($this->video_service == 2) { - $service = 'vimeo'; - } elseif ($this->video_service == 3) { - $service = 'brightcove'; + return '#/video/' . $this->to; } - return '#/webvideo/' . $service . '/' . $this->to; + + public function getAdditionnalContent() { + $this->video_auto_start = true; // Videos should always autoplay + return ' data-video="' . rawurlencode(webVideoLink::makeVideoTag($this, 1280, 720, $this->compiler)) . '" '; } }