- Einschränkung auf einzelne Seiten, Tage und userHashes
modified: redesign2018/markdownExperiment/admin/phpcount/phpcountLog.php - vergeblicher Versuch die fehlerhafte Anzeige bei deaktiviertem JS zu beheben modified: redesign2018/markdownExperiment/phpLib/imgGallery/index.php.tmpl - Anpassungen von Hand für einzelne Spezialfälle (@todo eifachere Individualkonfiguration) modified: redesign2018/markdownExperiment/src/Makefiles/Makefile.ftpUpload modified: redesign2018/markdownExperiment/src/Makefiles/Makefile.vidstabTest - Konzept einer neuen Videogalerie modified: redesign2018/markdownExperiment/src/galleryHelper/getVideoDurationJson.py new file: redesign2018/markdownExperiment/src/galleryHelper/videoGallery.tmpl.php new file: redesign2018/markdownExperiment/src/galleryHelper/videoGalleryVue.tmpl.php new file: redesign2018/markdownExperiment/src/galleryHelper/yamlRead.py
This commit is contained in:
marko
@@ -21,7 +21,7 @@ def probe(vid_file_path):
|
||||
@vid_file_path : The absolute (full) path of the video file, string.
|
||||
'''
|
||||
if type(vid_file_path) != str:
|
||||
raise Exception('Gvie ffprobe a full file path of the video')
|
||||
raise Exception('Give ffprobe a full file path of the video')
|
||||
return
|
||||
|
||||
command = ["ffprobe",
|
||||
|
||||
@@ -0,0 +1,266 @@
|
||||
<?php
|
||||
|
||||
$basePath = "/users/cwsvjudo/www";
|
||||
include_once("config.inc.php");
|
||||
|
||||
require_once($basePath."/config/phpcount.config.php");
|
||||
require_once($basePath."/config/cwsvJudo.config.php");
|
||||
|
||||
require_once($basePath."/ressourcen/phpLib/phpcount/phpcount.php");
|
||||
|
||||
require_once($basePath."/ressourcen/phpLib/cwsvJudo/miscAssis.php");
|
||||
|
||||
$cwsvJudoDbConnection = getCwsvJudoDbConn();
|
||||
$cwsvJudoDbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
|
||||
$wkId = $_GET['wkId'];
|
||||
|
||||
$vidQuery =
|
||||
$cwsvJudoDbConnection->prepare(
|
||||
"SELECT url, posterUrl FROM cwsvjudo.`shiai.videos` WHERE wkId = :wkId;"
|
||||
);
|
||||
$vidQuery->bindParam(':wkId', intval($wkId), PDO::PARAM_INT);
|
||||
|
||||
$vidQuery->execute();
|
||||
$wkVideos = $vidQuery->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
|
||||
$vidList = array();
|
||||
foreach( $wkVideos as $wkVid){
|
||||
$vidList[] = array(
|
||||
'vidSrc' => $wkVid['url'],
|
||||
'posterSrc' => $wkVid['posterUrl'],
|
||||
// 'width' => $posterSize[0],
|
||||
// 'height' => $posterSize[1]
|
||||
);
|
||||
}
|
||||
|
||||
/// Hilfsfunktion zum Anpassen der htmlDescription
|
||||
function descrName($aName){
|
||||
$retVal = "Videos der Judoka des Chemnitzer WSV beim Wettkampf ".$aName;
|
||||
if( strpos($aName, "Sommerabschlussgrillen") >= 0 ) $retVal = "Videos der Judoka des Chemnitzer WSV beim ".$aName;
|
||||
if( strpos($aName, "Jahrendefeier") >= 0 ) $retVal = "Videos der Judoka des Chemnitzer WSV bei der ".$aName;
|
||||
return $retVal;
|
||||
}/// Ende descrName
|
||||
|
||||
$messages = array();
|
||||
?>
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title><?php echo $wkName?> - Videoalbum</title>
|
||||
<?php //PHPCount::AddHit($wkName." - Videoalbum");?>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="description" content="<?php echo descrName($wkName);?>">
|
||||
<meta name="keywords" content="Album, Videos">
|
||||
<!-- BluimpGallery Zeug -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!--
|
||||
<link rel="stylesheet" href="/ressourcen/blueimpGallery/css/blueimp-gallery.css">
|
||||
<link rel="stylesheet" href="/ressourcen/blueimpGallery/css/blueimp-gallery-indicator.css">
|
||||
<link rel="stylesheet" href="/ressourcen/blueimpGallery/css/blueimp-gallery-video.css">
|
||||
-->
|
||||
|
||||
<!-- favIcon und Co nach der empfehlung von https://github.com/audreyr/favicon-cheat-sheet -->
|
||||
<link rel="shortcut icon" type="image/x-icon" sizes="16x16 32x32 48x48 64x64" href="/ressourcen/graphiken/logos/favicon/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/ressourcen/graphiken/logos/apple-touch-icon/apple-touch-icon-152.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/ressourcen/graphiken/logos/apple-touch-icon/apple-touch-icon-180.png" />
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<link rel="canonical" href="http://cwsvjudo.bplaced.net<?php echo $_SERVER['REQUEST_URI']?>" />
|
||||
|
||||
<script type="text/javascript" src="<?php echo($urlBase)?>/ressourcen/blueimpGallery/js/blueimp-gallery.min.js" async=""></script>
|
||||
|
||||
<!--https://github.com/aFarkas/lazysizes-->
|
||||
<script src="<?php echo($urlBase)?>/ressourcen/jsLib/lazysizes.min.js" async=""></script>
|
||||
<style>
|
||||
img.lazyload {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
body{box-sizing: border-box; margin: 0;}
|
||||
.smallFont{font-size: small;}
|
||||
.centerText{text-align: center;}
|
||||
.navButton{
|
||||
box-sizing: border-box;
|
||||
border-color: white;
|
||||
border-style: outset;
|
||||
border-radius: 1em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="color: #000000; background-color: #FFAE00" >
|
||||
<iframe style="width:100%;height:auto;" src="http://cwsvjudo-media-2018.unaux.com/videoalben/videoalben.2018/2018-11-24-RKPXXI-U7U9U11-Schlettau/"></iframe>
|
||||
<a title="Galerien der Judoka des Chemnitzer WSV" href="/galerien">Zur Galerieübersicht</a>
|
||||
<?php
|
||||
/// Eine kleine Messagebox
|
||||
if( !empty($messages) ){
|
||||
?>
|
||||
<div style="border: 1px solid black">
|
||||
<?php
|
||||
if( !empty( $messages['info'] ) ) echo( $messages['info'] );
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<h1 class="centerText" >
|
||||
<?php echo($wkName);?> - Videoalbum
|
||||
</h1>
|
||||
|
||||
<p class="centerText smallFont">
|
||||
[<?php echo count($vidList)?> Videos]
|
||||
</p>
|
||||
|
||||
<p class="centerText smallFont">
|
||||
Auf die jeweiligen Bilder klicken um das Video anzuwählen.
|
||||
</p>
|
||||
|
||||
<hr/>
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
margin: 0;
|
||||
}
|
||||
.galImgList{
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.galImgList div{
|
||||
flex: auto;
|
||||
width: 100%;
|
||||
padding: 1vw 0;
|
||||
flex-grow: unset;
|
||||
}
|
||||
.galImgList div img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.galImgList div video{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.galImgList div{
|
||||
width: calc(100% * (1/3) - 2 * .5vw);
|
||||
margin: .5vw;
|
||||
}
|
||||
.galImgList{
|
||||
padding: .5vw;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1024px) {
|
||||
.galImgList div{
|
||||
width: calc(100% * (1/4) - 2 * 1vw);
|
||||
margin: 1vw;
|
||||
}
|
||||
.galImgList{
|
||||
padding: 1vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<?php
|
||||
|
||||
foreach( $vidList as $vidKey => $vidEntry ){
|
||||
echo(
|
||||
"<video controls preload=\"none\" poster=\"".$vidEntry['posterSrc']."\">".
|
||||
"<source src=\"".$vidEntry['vidSrc']."\" type=\"video/webm\">".
|
||||
"Dieser Browser scheint das Video nicht abspielen zu können.".
|
||||
"</video>"
|
||||
);
|
||||
}
|
||||
?>
|
||||
<!--
|
||||
<div id="links" class="galImgList">
|
||||
<?php
|
||||
foreach( $vidList as $vidKey => $vidEntry ){
|
||||
echo( "<div>" );
|
||||
echo "<img class=\"lazyload\" ".
|
||||
// Wir haben unsere eigen noscript-Alternative (die kein img mehr
|
||||
// ist!), deshalb brauchen wir diesen empfohlenen Fallback nicht!
|
||||
// "src=\"".$vidEntry['posterSrc']."\"".
|
||||
// "srcset=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"".
|
||||
"id=\"Video".( $vidKey )."\" ".
|
||||
"data-src=\"".( $vidEntry['posterSrc'] )."\" ".
|
||||
// "width=\"".$vidEntry['width']."\" ".
|
||||
// "height=\"".$vidEntry['height']."\" ".
|
||||
"alt=\"[".( $vidKey + 1 )."/".( count($vidList) )."]\" ".
|
||||
"title=\"".( $wkName )." Video ".( $vidKey + 1 )." von ".( count($vidList) )."\" ".
|
||||
"onclick=\"startGalleryShow(" . $vidKey . ");\"".
|
||||
" />";
|
||||
echo(
|
||||
"<noscript>".
|
||||
// "<video controls preload=\"none\" poster=\"".$vidEntry['posterSrc']."\" width=\"".$vidEntry['width']."\" height=\"".$vidEntry['height']."\">".
|
||||
"<video controls preload=\"none\" poster=\"".$vidEntry['posterSrc']."\">".
|
||||
"<source src=\"".$vidEntry['vidSrc']."\" type=\"video/webm\">".
|
||||
"Dieser Browser scheint das Video nicht abspielen zu können.".
|
||||
"</video>".
|
||||
"</noscript>"
|
||||
);
|
||||
echo("</div>");
|
||||
}
|
||||
?>
|
||||
</div><!-- Ende galImgList -->
|
||||
|
||||
<!-- BluimpGalerry Lightbox Version -->
|
||||
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
|
||||
|
||||
<!--
|
||||
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
|
||||
<div class="slides"></div>
|
||||
<h2 class="title"><?php echo $wkName?></h2>
|
||||
<a class="prev">‹</a>
|
||||
<a class="next">›</a>
|
||||
<a class="close">×</a>
|
||||
<a class="play-pause"></a>
|
||||
<ol class="indicator"></ol>
|
||||
</div>
|
||||
<script>
|
||||
function startGalleryShow(startIndex = 0){
|
||||
var videoList = [
|
||||
<?php
|
||||
foreach( $vidList as $vidEntry){
|
||||
// echo "{href: '".$vidEntry['vidSrc']."', poster: '".$vidEntry['posterSrc']."', type: 'video/webm'},";
|
||||
echo "{href: '".$vidEntry['vidSrc']."', poster: '".$vidEntry['posterSrc']."', type: 'video/webm'},";
|
||||
}
|
||||
?>
|
||||
];
|
||||
var gallery = blueimp.Gallery(
|
||||
videoList,
|
||||
{
|
||||
preloadRange: 0,
|
||||
startSlideshow: false,
|
||||
stretchImages: true,
|
||||
index: startIndex,
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
window.onload = function () {
|
||||
startGalleryShow();
|
||||
};
|
||||
// startGalleryShow();
|
||||
</script>
|
||||
<hr/>
|
||||
<!-- Ende: BluimpGalery Lightbox Version -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,210 @@
|
||||
<?php
|
||||
|
||||
$basePath = "/users/cwsvjudo/www";
|
||||
include_once("config.inc.php");
|
||||
|
||||
require_once($basePath."/config/phpcount.config.php");
|
||||
require_once($basePath."/config/cwsvJudo.config.php");
|
||||
|
||||
require_once($basePath."/ressourcen/phpLib/phpcount/phpcount.php");
|
||||
|
||||
require_once($basePath."/ressourcen/phpLib/cwsvJudo/miscAssis.php");
|
||||
|
||||
$cwsvJudoDbConnection = getCwsvJudoDbConn();
|
||||
$cwsvJudoDbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
|
||||
$wkId = $_GET['wkId'];
|
||||
|
||||
$vidQuery =
|
||||
$cwsvJudoDbConnection->prepare(
|
||||
"SELECT url, posterUrl FROM cwsvjudo.`shiai.videos` WHERE wkId = :wkId;"
|
||||
);
|
||||
$vidQuery->bindParam(':wkId', intval($wkId), PDO::PARAM_INT);
|
||||
|
||||
$vidQuery->execute();
|
||||
$wkVideos = $vidQuery->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
|
||||
$vidList = array();
|
||||
foreach( $wkVideos as $wkVid){
|
||||
// $posterSrc = str_replace( ".webm", ".jpg", str_replace("webm/", "thumbnails/", $vid ) );
|
||||
// $posterSize = getimagesize( $posterSrc );
|
||||
$vidList[] = array(
|
||||
'vidSrc' => $wkVid['url'],
|
||||
'posterSrc' => $wkVid['posterUrl'],
|
||||
// 'width' => $posterSize[0],
|
||||
// 'height' => $posterSize[1]
|
||||
);
|
||||
}
|
||||
|
||||
/// Hilfsfunktion zum Anpassen der htmlDescription
|
||||
function descrName($aName){
|
||||
$retVal = "Videos der Judoka des Chemnitzer WSV beim Wettkampf ".$aName;
|
||||
if( strpos($aName, "Sommerabschlussgrillen") >= 0 ) $retVal = "Videos der Judoka des Chemnitzer WSV beim ".$aName;
|
||||
if( strpos($aName, "Jahrendefeier") >= 0 ) $retVal = "Videos der Judoka des Chemnitzer WSV bei der ".$aName;
|
||||
return $retVal;
|
||||
}/// Ende descrName
|
||||
|
||||
$messages = array();
|
||||
?>
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title><?php echo $wkName?> - Videoalbum</title>
|
||||
<?php //PHPCount::AddHit($wkName." - Videoalbum");?>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="description" content="<?php echo descrName($wkName);?>">
|
||||
<meta name="keywords" content="Album, Videos">
|
||||
|
||||
<!-- favIcon und Co nach der empfehlung von https://github.com/audreyr/favicon-cheat-sheet -->
|
||||
<link rel="shortcut icon" type="image/x-icon" sizes="16x16 32x32 48x48 64x64" href="/ressourcen/graphiken/logos/favicon/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/ressourcen/graphiken/logos/apple-touch-icon/apple-touch-icon-152.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/ressourcen/graphiken/logos/apple-touch-icon/apple-touch-icon-180.png" />
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<link rel="canonical" href="http://cwsvjudo.bplaced.net<?php echo $_SERVER['REQUEST_URI']?>" />
|
||||
|
||||
|
||||
<script type="text/javascript" src="https://unpkg.com/vue@2.4.3/dist/vue.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/vue-gallery"></script>
|
||||
|
||||
<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery-youtube.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery-video.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery-fullscreen.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-helper.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://unpkg.com/blueimp-gallery@2.27.0/css/blueimp-gallery.min.css">
|
||||
<style type="text/css">
|
||||
.image {
|
||||
float: left;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
border: 1px solid #ebebeb;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload=function(){
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: function () {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
title: 'A YouYube video',
|
||||
href: 'https://www.youtube.com/watch?v=hNdlUHBJDKs',
|
||||
type: 'text/html',
|
||||
youtube: 'hNdlUHBJDKs',
|
||||
poster: 'https://img.youtube.com/vi/hNdlUHBJDKs/maxresdefault.jpg'
|
||||
},
|
||||
{
|
||||
title: 'A YouYube video 2',
|
||||
href: 'https://www.youtube.com/watch?v=s5iUsaPPtnk',
|
||||
type: 'text/html',
|
||||
youtube: 's5iUsaPPtnk',
|
||||
poster: 'https://img.youtube.com/vi/s5iUsaPPtnk/maxresdefault.jpg'
|
||||
},
|
||||
<?php
|
||||
//foreach( $vidList as $vidKey => $vidEntry ){
|
||||
// echo(
|
||||
// "{href: '".$vidEntry['vidSrc']."', poster: '".$vidEntry['posterSrc']."', type: 'video/webm'},"
|
||||
// );
|
||||
//}
|
||||
?>
|
||||
{
|
||||
title: 'Image',
|
||||
href: 'https://dummyimage.com/1600/ffffff/000000',
|
||||
type: 'image/jpeg',
|
||||
poster: 'https://dummyimage.com/350/ffffff/000000'
|
||||
}
|
||||
],
|
||||
index: null
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
'gallery': VueGallery
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<!--https://github.com/aFarkas/lazysizes-->
|
||||
<script src="<?php echo($urlBase)?>/ressourcen/jsLib/lazysizes.min.js" async=""></script>
|
||||
<style>
|
||||
img.lazyload {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
body{box-sizing: border-box; margin: 0;}
|
||||
.smallFont{font-size: small;}
|
||||
.centerText{text-align: center;}
|
||||
.navButton{
|
||||
box-sizing: border-box;
|
||||
border-color: white;
|
||||
border-style: outset;
|
||||
border-radius: 1em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="color: #000000; background-color: #FFAE00" >
|
||||
<a title="Galerien der Judoka des Chemnitzer WSV" href="/galerien">Zur Galerieübersicht</a>
|
||||
<?php
|
||||
/// Eine kleine Messagebox
|
||||
if( !empty($messages) ){
|
||||
?>
|
||||
<div style="border: 1px solid black">
|
||||
<?php
|
||||
if( !empty( $messages['info'] ) ) echo( $messages['info'] );
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<h1 class="centerText" >
|
||||
<?php echo($wkName);?> - Videoalbum
|
||||
</h1>
|
||||
|
||||
<p class="centerText smallFont">
|
||||
[<?php echo count($vidList)?> Videos]
|
||||
</p>
|
||||
|
||||
<p class="centerText smallFont">
|
||||
Auf die jeweiligen Bilder klicken um das Video anzuwählen.
|
||||
</p>
|
||||
|
||||
<hr/>
|
||||
|
||||
<!--vueGallery-->
|
||||
<div id="app">
|
||||
<gallery
|
||||
:images="images"
|
||||
:index="index"
|
||||
:options="{youTubeVideoIdProperty: 'youtube', youTubePlayerVars: undefined, youTubeClickToPlay: true}"
|
||||
@close="index = null"
|
||||
></gallery>
|
||||
<div
|
||||
class="image"
|
||||
v-for="image, imageIndex in images"
|
||||
@click="index = imageIndex"
|
||||
:style="{ backgroundImage: 'url(' + image.poster + ')', width: '300px', height: '200px' }"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
Reference in New Issue
Block a user