Merge branch 'redesign2018' of /media/sdb1/gitRepositories/judo into redesign2018

Conflicts: homepage/redesign2018/markdownExperiment/src/Makefiles/Makefile.ftpUpload homepage/redesign2018/markdownExperiment/src/galleryHelper/videoGallery.tmpl.php
2019-01-24 05:18:24 +01:00
parent 556b329833 29bb5c6fad
commit 436e74afd3
15 changed files with 793 additions and 111 deletions
--- a/homepage/redesign2018/markdownExperiment/src/galleryHelper/videoGallery.tmpl.php
+++ b/homepage/redesign2018/markdownExperiment/src/galleryHelper/videoGallery.tmpl.php
@@ -17,7 +17,7 @@ include_once("config.inc.php");

 	$vidQuery = 
 		$cwsvJudoDbConnection->prepare(
-			"SELECT url FROM cwsvjudo.`shiai.videos` WHERE wkId = :wkId;"
+			"SELECT url, posterUrl FROM cwsvjudo.`shiai.videos` WHERE wkId = :wkId;"
 		);
 		$vidQuery->bindParam(':wkId', intval($wkId), PDO::PARAM_INT);

@@ -29,9 +29,10 @@ include_once("config.inc.php");
 	foreach( $wkVideos as $wkVid){
 //		$posterSrc = str_replace( ".webm", ".jpg", str_replace("webm/", "thumbnails/", $vid ) );
 //		$posterSize = getimagesize( $posterSrc );
+//			'posterSrc' => $posterSrc,
 		$vidList[] = array(
 			'vidSrc' => $wkVid['url'],
-//			'posterSrc' => $posterSrc,
+			'posterSrc' => $wkVid['posterUrl'],
 //			'width' => $posterSize[0],
 //			'height' => $posterSize[1]
 		);
@@ -72,13 +73,10 @@ return $retVal;

 		<link rel="canonical" href="http://cwsvjudo.bplaced.net<?php echo $_SERVER['REQUEST_URI']?>" />

-<!--
-		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/blueimp-gallery.min.js" async=""></script>
-->
+		<script type="text/javascript" src="<?php echo($urlBase)?>/ressourcen/blueimpGallery/js/blueimp-gallery.min.js" async=""></script>
+
 		<!--https://github.com/aFarkas/lazysizes-->
-<!--
-		<script src="/ressourcen/jsLib/lazysizes.min.js" async=""></script>
-->
+		<script src="<?php echo($urlBase)?>/ressourcen/jsLib/lazysizes.min.js" async=""></script>
 		<style>
 			img.lazyload {
 				display: none;
@@ -108,6 +106,7 @@ return $retVal;
 	</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
@@ -182,9 +181,10 @@ return $retVal;
 	}
 </style>
 <?php
+
 foreach( $vidList as $vidKey => $vidEntry ){
 	echo(
-		"<video controls preload=\"none\">".
+		"<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>"
@@ -202,7 +202,7 @@ foreach( $vidList as $vidKey => $vidEntry ){
 //						"src=\"".$vidEntry['posterSrc']."\"".
 //						"srcset=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"".
 						"id=\"Video".( $vidKey )."\" ".
-//						"data-src=\"".( $vidEntry['posterSrc'] )."\" ".
+						"data-src=\"".( $vidEntry['posterSrc'] )."\" ".
 //						"width=\"".$vidEntry['width']."\" ".
 //						"height=\"".$vidEntry['height']."\" ".
 						"alt=\"[".( $vidKey + 1 )."/".( count($vidList) )."]\" ".
@@ -212,7 +212,7 @@ foreach( $vidList as $vidKey => $vidEntry ){
 				echo(
 					"<noscript>".
 //						"<video controls preload=\"none\" poster=\"".$vidEntry['posterSrc']."\" width=\"".$vidEntry['width']."\" height=\"".$vidEntry['height']."\">".
-						"<video controls preload=\"none\">".
+						"<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>".
@@ -225,6 +225,7 @@ foreach( $vidList as $vidKey => $vidEntry ){

 <!-- 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>
@@ -241,7 +242,6 @@ foreach( $vidList as $vidKey => $vidEntry ){
 				<?php 
 					foreach( $vidList as $vidEntry){
 //						echo "{href: '".$vidEntry['vidSrc']."', poster: '".$vidEntry['posterSrc']."', type: 'video/webm'},";
-						echo "{href: '".$vidEntry['vidSrc']."', type: 'video/webm'},";
 					}
 				?>
 			];
@@ -260,7 +260,8 @@ foreach( $vidList as $vidKey => $vidEntry ){
 						xmlHttp.send(null);
 					},
 */
-					startSlideshow: true,
+					preloadRange: 0,
+					startSlideshow: false,
 					stretchImages: true,
 					index: startIndex,
 				}
@@ -273,6 +274,6 @@ foreach( $vidList as $vidKey => $vidEntry ){
 //			startGalleryShow();
 		</script>
 		<hr/>
-->
+
 	</body>
 </html>
--- a/homepage/redesign2018/markdownExperiment/src/galleryHelper/videoGalleryVue.tmpl.php
+++ b/homepage/redesign2018/markdownExperiment/src/galleryHelper/videoGalleryVue.tmpl.php
@@ -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>
--- a/homepage/redesign2018/markdownExperiment/src/galleryHelper/yamlRead.py
+++ b/homepage/redesign2018/markdownExperiment/src/galleryHelper/yamlRead.py
@@ -0,0 +1 @@
+