9c2af1f3bf
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
211 lines
6.3 KiB
PHP
211 lines
6.3 KiB
PHP
<?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>
|