Skip to content

Commit 06a41e5

Browse files
danwdartdanwdart
committed
Nicer video page
1 parent f4e719f commit 06a41e5

File tree

3 files changed

+88
-70
lines changed

3 files changed

+88
-70
lines changed

‎src/php/Chaplin/Module/Api/views/scripts/partials/fbsdk.phtml

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!-- Facebook Meta Tags -->
2+
<meta property="og:url" content="<?php echo $this->url; ?>" />
3+
<meta property="og:type" content="website" />
4+
<meta property="og:title" content="<?php echo $this->title; ?>" />
5+
<meta property="og:description" content="<?php echo $this->description; ?>" />
6+
<meta property="og:image" content="<?php echo $this->image; ?>" />
7+
<!-- Load Facebook SDK for JavaScript -->
8+
<div id="fb-root"></div>
9+
<script>(function(d, s, id) {
10+
var js, fjs = d.getElementsByTagName(s)[0];
11+
if (d.getElementById(id)) return;
12+
js = d.createElement(s); js.id = id;
13+
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.7&appId=<? echo $this->facebookAppId ?>";
14+
fjs.parentNode.insertBefore(js, fjs);
15+
}(document, 'script', 'facebook-jssdk'));</script>
16+
<!-- End Facebook Meta Tags -->

‎src/php/Chaplin/Module/Api/views/scripts/video/watch.phtml

Lines changed: 68 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -29,51 +29,47 @@
2929
<link rel="alternate" type="application/xml+oembed"
3030
href="<?php echo $this->vhost ?>/services/oembed?url=<?php echo $this->vhost ?>/video/watch/id/<?php echo $this->video->getVideoId() ?>&format=xml"
3131
title="<?php echo $this->video->getTitle() ?>" />
32-
<!-- Facebook Meta Tags -->
33-
<meta property="og:url" content="<?php echo $this->vhost ?>/video/watch/id/<?php echo $this->video->getVideoId() ?>" />
34-
<meta property="og:type" content="website" />
35-
<meta property="og:title" content="<?php echo $this->video->getTitle() ?> on Chaplin" />
36-
<meta property="og:description" content="<?php echo urlencode($this->video->getDescription()) ?>" />
37-
<meta property="og:image" content="<?php echo $this->vhost ?>/uploads/<?php echo $this->video->getFilename() ?>.png" />
38-
<!-- Load Facebook SDK for JavaScript -->
39-
<div id="fb-root"></div>
40-
<script>(function(d, s, id) {
41-
var js, fjs = d.getElementsByTagName(s)[0];
42-
if (d.getElementById(id)) return;
43-
js = d.createElement(s); js.id = id;
44-
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.7&appId=<? echo $this->facebookAppId ?>";
45-
fjs.parentNode.insertBefore(js, fjs);
46-
}(document, 'script', 'facebook-jssdk'));</script>
47-
<!-- End Facebook Meta Tags -->
4832

33+
<?php echo $this->partial("partials/fbsdk.phtml", [
34+
"url" => $this->vhost ."/video/watch/id/". $this->video->getVideoId(),
35+
"title" => $this->video->getTitle()." on Chaplin",
36+
"description" => urlencode($this->video->getDescription()),
37+
"image" => $this->vhost . $this->video->getFilename() . ".png",
38+
"facebookAppId" => $this->facebookAppId
39+
]); ?>
4940
<h1><?php echo $this->video->getTitle();?></h1>
50-
<div id="videoarea">
51-
<video id="video" controls poster="<?php echo $this->video->getFilename().'.png?'.time();?>">
41+
<div class="row text-center" id="videoarea">
42+
<video class="col-lg-12" id="video" controls poster="<?php echo $this->video->getFilename().'.png?'.time();?>">
5243
<source src="<?php echo $this->video->getFilename().'?'.time();?>"/>
5344
</video>
54-
<div id="fun">
55-
<button id="slower">&laquo; Slow Motion</button>
56-
<button id="normalspeed">Normal Speed</button>
57-
<button id="faster">Fast Forward &raquo;</button>
58-
<select class="effect">
59-
<option class="filter" value="none">-- Select Effect --</option>
60-
<option class="filter" value="blur">Blur</option>
61-
<option class="filter" value="gray">Grey</option>
62-
<option class="filter" value="sepia">Sepia</option>
63-
<option class="filter" value="bright">Bright</option>
64-
<option class="filter" value="highcontrast">Contrast</option>
65-
<option class="filter" value="colour">Colourful</option>
66-
<option class="filter" value="invert">Invert</option>
67-
<option class="filter" value="saturate">Saturate</option>
68-
<option class="filter" value="earthquake">Earthquake!</option>
69-
<option class="filter" value="br">Barrel Roll!</option>
70-
<option class="filter" value="drunk">Drunk!</option>
71-
</select>
72-
</div>
45+
<div class="btn-group btn-block">
46+
<button class="ml-0 col-2 infinite btn btn-secondary"><i class="fa fa-refresh"></i> Loop</button>
47+
<button class="ml-0 col-2 btn btn-secondary" id="slower">&laquo; Slow</button>
48+
<button class="ml-0 col-2 btn btn-secondary" id="normalspeed">Normal</button>
49+
<button class="ml-0 col-2 btn btn-secondary" id="faster">Fast &raquo;</button>
50+
<select class="ml-0 col-4 btn btn-secondary effect">
51+
<option class="filter" value="none">-- Select Effect --</option>
52+
<option class="filter" value="blur">Blur</option>
53+
<option class="filter" value="gray">Grey</option>
54+
<option class="filter" value="sepia">Sepia</option>
55+
<option class="filter" value="bright">Bright</option>
56+
<option class="filter" value="highcontrast">Contrast</option>
57+
<option class="filter" value="colour">Colourful</option>
58+
<option class="filter" value="invert">Invert</option>
59+
<option class="filter" value="saturate">Saturate</option>
60+
<option class="filter" value="earthquake">Earthquake!</option>
61+
<option class="filter" value="br">Barrel Roll!</option>
62+
<option class="filter" value="drunk">Drunk!</option>
63+
</select>
64+
</div>
7365
</div>
7466
<div id="infoarea">
75-
<button class="infinite btn btn-primary"><i class="fa fa-refresh"></i> Loop</button>
76-
<br/>
67+
<?php if ($this->video->isMine()): ?>
68+
<br/>
69+
<a class="btn btn-info" href="/video/edit/id/<?php echo $this->video->getVideoId();?>"><i class="fa fa-edit"></i> Edit</a>
70+
<a class="btn btn-danger" href="/video/delete/id/<?php echo $this->video->getVideoId();?>"><i class="fa fa-times-circle"></i> Delete</a>
71+
<br/>
72+
<?php endif; ?>
7773
<br/>Uploaded by: <a href="/user/<?php echo $this->video->getUsername(); ?>"><?php echo $this->video->getUsername(); ?></a>
7874
<br/>Uploaded on <?php echo date('d/m/Y H:i', $this->video->getTimeCreated());?> (<?php echo $this->video->getTimeAgo(); ?>)
7975
<?php if ($this->video->getSource()): ?>
@@ -87,38 +83,42 @@
8783
<p>Short URL: <input type="text" disabled value="<?php echo $this->short; ?>"/></p>
8884
<p><strong>&uparrow; <?php echo $this->video->getVotesUp(); ?> / <?php echo $this->video->getVotesDown(); ?> &downarrow;</strong></p>
8985
<?php if ($this->video->getPrivacy()->isPublic()): ?>
90-
<p><?php echo $this->partial("partials/twittershare.phtml"); ?></p>
91-
<p><?php echo $this->partial("partials/facebookshare.phtml", [
92-
'vhost' => $this->vhost,
93-
'video' => $this->video
94-
]); ?></p>
95-
<p><?php echo $this->partial("partials/gplusshare.phtml"); ?></p>
96-
<p><?php echo $this->partial("partials/gnusocialshare.phtml"); ?></p>
97-
<p><?php echo $this->partial("partials/diasporashare.phtml"); ?></p>
86+
<div class="row bg-light">
87+
<div class="col-lg-2 col-md-2 col-sm-4 col-12">
88+
<?php echo $this->partial("partials/twittershare.phtml"); ?>
89+
</div>
90+
<div class="col-lg-2 col-md-2 col-sm-4 col-12">
91+
<?php echo $this->partial("partials/facebookshare.phtml", [
92+
'vhost' => $this->vhost,
93+
'video' => $this->video
94+
]); ?>
95+
</div>
96+
<div class="col-lg-2 col-md-2 col-sm-4 col-12">
97+
<?php echo $this->partial("partials/gplusshare.phtml"); ?>
98+
</div>
99+
<div class="col-lg-3 col-md-3 col-sm-4 col-12">
100+
<?php echo $this->partial("partials/gnusocialshare.phtml"); ?>
101+
</div>
102+
<div class="col-lg-3 col-md-3 col-sm-4 col-12">
103+
<?php echo $this->partial("partials/diasporashare.phtml"); ?>
104+
</div>
105+
</div>
98106
<?php endif; ?>
99107
<br/>
100-
<?php if(\Chaplin\Auth::getInstance()->hasIdentity()):
101-
if ('1' === $this->video->getYourVote()) :
102-
echo '<i class="fa fa-arrow-up"></i>';
103-
else:?>
104-
<a class="atotext btn btn-secondary" href="/video/vote/id/<?php echo $this->video->getVideoId();?>/vote/up"><i class="fa fa-arrow-up"></i></a>
105-
<?php endif; echo ' / ';
106-
if ('0' === $this->video->getYourVote()) :
107-
echo '<i class="fa fa-arrow-down"></i>';
108-
else:?>
109-
<a class="atotext btn btn-secondary" href="/video/vote/id/<?php echo $this->video->getVideoId();?>/vote/down"><i class="fa fa-arrow-down"></i></a>
110-
<?php endif;?>&nbsp;&nbsp;
111-
<?php endif; ?>
112108
<a class="btn btn-primary" href="/video/download/id/<?php echo $this->video->getVideoId();?>"><i class="fa fa-download"></i> Download</a>
113-
<?php
114-
if ($this->video->isMine()):
115-
?>
116-
<a class="btn btn-danger" href="/video/delete/id/<?php echo $this->video->getVideoId();?>"><i class="fa fa-times-circle"></i> Delete</a>
117-
<a class="btn btn-info" href="/video/edit/id/<?php echo $this->video->getVideoId();?>"><i class="fa fa-edit"></i> Edit</a>
118-
<?php endif;?>
119-
<br/>
120-
<?php if(\Chaplin\Auth::getInstance()->hasIdentity()): echo $this->formComment; else:
121-
echo 'Login above to comment.'; endif; ?>
109+
<br/><br/>
110+
<div class="btn-group">
111+
<?php if(\Chaplin\Auth::getInstance()->hasIdentity()): ?>
112+
<a class="atotext btn btn-secondary<?php echo (1 === $this->video->getYourVote()) ? " active" : ""; ?>" href="/video/vote/id/<?php echo $this->video->getVideoId();?>/vote/up">
113+
<i class="fa fa-arrow-up"></i>
114+
</a>
115+
<a class="atotext btn btn-secondary<?php echo (0 === $this->video->getYourVote()) ? " active" : ""; ?>" href="/video/vote/id/<?php echo $this->video->getVideoId();?>/vote/down">
116+
<i class="fa fa-arrow-down"></i>
117+
</a>
118+
<?php endif; ?>
119+
</div>
120+
<br/><br/>
121+
<?php if(\Chaplin\Auth::getInstance()->hasIdentity()): echo $this->formComment; else: echo 'Login above to comment.'; endif; ?>
122122
<br/>
123123
<div id="comments" rel="/video/comments/id/<?php echo $this->video->getVideoId();?>">
124124
<?php foreach($this->ittComments as $modelComment):?>

‎src/php/public/css/video.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,23 @@
2424
**/
2525

2626
#infoarea {
27-
padding: 5px;
2827
width: 720px;
2928
margin: 0 auto;
3029
}
3130

3231
#videoarea {
32+
width: 720px;
33+
margin: 0 auto;
3334
text-align: center;
35+
border: 5px outset;
3436
}
3537

3638
#video {
39+
padding: 0;
3740
width: 720px;
3841
max-height: 480px;
3942
background-color: black;
4043
text-align: center;
41-
border: 5px outset;
4244
}
4345

4446
#video::-webkit-media-controls-panel {

0 commit comments

Comments
 (0)