Skip to content

Commit

Permalink
Large update to allow custom offline stream images
Browse files Browse the repository at this point in the history 
This update allows users to submit their own image to be used if a
channel page is browsed to while the user is offline. It can be uploaded
on the user settings page. .jpg, .png, and .gif are all allowed. As a
side effect of this update, and due to the poor error handling of
video.js, any video.js errors are suppressed in favor of showing the
offline image.
  • Loading branch information
@Fenrirthviti
Fenrirthviti committed Apr 26, 2017
1 parent bef48ad commit 22b3b5a
Show file tree
Hide file tree
Showing 12 changed files with 421 additions and 57 deletions.
33 changes: 17 additions & 16 deletions css/application.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/application.css.map
View file

Large diffs are not rendered by default.

41 changes: 37 additions & 4 deletions inc/index/settings.php
View file
Expand Up @@ -149,22 +149,22 @@ class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-butt
<div class="mdl-tabs__panel" id="profile">
<div class="mdl-content__settings">
<div class="mdl-grid">
<div class="mdl-card mdl-shadow--2dp avatar-form">
<div class="mdl-card mdl-shadow--2dp profile-form">
<div class="mdl-card__title">
<span>Avatar Update</span>
</div>
<div class="mdl-card__supporting-text">
Current Avatar:
<div class="fill">
<img src="<?= $accountinfo['profile_img'] ?>"
style="max-width: 100%; max-height: 100%;">
style="max-width: 50%; max-height: 100%;">
</div>
<form action="/lib/upload.php" method="post" class="form" id="avatarUpdate"
enctype="multipart/form-data">

<div class="mdl-textfield mdl-js-textfield mdl-textfield--file full-width">
<input class="mdl-textfield__input" placeholder="Browse..." type="text"
id="file"
id="avatar_file"
readonly/>
<div class="mdl-button mdl-button--primary mdl-button--icon mdl-button--file">
<i class="material-icons">perm_media</i><input type="file" name="avatar"
Expand All @@ -182,7 +182,40 @@ class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-butt
</form>
</div>
</div>
<div class="mdl-card mdl-shadow--2dp settings-form">
<div class="mdl-card mdl-shadow--2dp profile-form">
<div class="mdl-card__title">
<span>Offline Image</span>
</div>
<div class="mdl-card__supporting-text">
Current offline Image:
<div class="fill">
<img src="<?= $accountinfo['offline_image'] ?>"
style="max-width: 100%; max-height: 50%;">
</div>
<form action="/lib/upload.php" method="post" class="form" id="offlineUpdate"
enctype="multipart/form-data">

<div class="mdl-textfield mdl-js-textfield mdl-textfield--file full-width">
<input class="mdl-textfield__input" placeholder="Browse..." type="text"
id="offline_file"
readonly/>
<div class="mdl-button mdl-button--primary mdl-button--icon mdl-button--file">
<i class="material-icons">perm_media</i><input type="file" name="offline"
id="offline">
</div>
</div>

<div class="form__action">
<button type="submit" name="Upload" value="Submit" form="offlineUpdate"
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
Upload
</button>
</div>

</form>
</div>
</div>
<div class="mdl-card mdl-shadow--2dp profile-form">
<div class="mdl-card__title">
<span>Subscription Settings</span>
</div>
Expand Down
21 changes: 14 additions & 7 deletions index.php
View file
Expand Up @@ -286,20 +286,25 @@ function bytesConvert($bytes, $decimals = 2)
<?php if (!empty($streamkey)) { ?>
var stream_key = "<?php echo $user->updateStreamkey($streamkey, 'channel'); ?>";
var current_channel = '<?= $streamkey; ?>';
<?php } else { ?>
var current_channel = 'GlobalChatChannel';
<?php } ?>

<?php if (!empty($streamkey)) { ?>
var streamPlayer = videojs('streamPlayer', {
techOrder: ['flash'],
sources: [{
src: 'rtmp://<?= $surl ?>/live&<?= $streamkey ?>',
type: 'rtmp/flv',
label: 'Flash'
}],
}).on('error', function (e) {
let videoposter = '<?php echo $user->updateStreamkey($streamkey, 'offline_image') ?>';
console.log('Stream encountered an error (most likely offline), displaying offline image.');
$('.vjs-error-display').hide();

$('.vjs-poster').css({
'background-image': 'url(' + videoposter + ')',
'display': 'block'
});
$('.vjs-paused .vjs-big-play-button').css({'display': 'none'});
});
streamPlayer.persistvolume({namespace: "Rachni-Volume-Control"});
streamPlayer.persistvolume({namespace: "Rachni-Volume-Control-" + stream_key});
this.popoutPlayer = function () {
streamPlayer.pause();
window.open("<?= $furl ?>/popout/<?= $streamkey ?>", "_blank", "menubar=0,scrollbars=0,status=0,titlebar=0,toolbar=0,top=200,left=200,resizable=yes,width=1280,height=784");
Expand All @@ -318,8 +323,10 @@ function bytesConvert($bytes, $decimals = 2)
type: 'video/mp4',
}],
});
videoPlayer.persistvolume({namespace: "Rachni-Volume-Control"});
videoPlayer.persistvolume({namespace: "Rachni-Volume-Control-<?= $video ?>"});

<?php } else { ?>
var current_channel = 'GlobalChatChannel';
<?php } ?>
</script>
</body>
Expand Down
5 changes: 4 additions & 1 deletion js/rachni.js
View file
Expand Up @@ -221,7 +221,10 @@ if (window.jQuery) {

// File upload name update workaround
$('#avatar').change(function () {
document.getElementById("file").value = this.files[0].name;
document.getElementById("avatar_file").value = this.files[0].name;
});
$('#offline').change(function () {
document.getElementById("offline_file").value = this.files[0].name;
});

if (window.mCustomScrollbar) {
Expand Down
70 changes: 69 additions & 1 deletion lib/upload.php
View file
Expand Up @@ -87,7 +87,7 @@
$moved = move_uploaded_file($tmp_name, "$uploads_dir/avatar.$ext");
if ($moved === true) {
$avatarPath = "/$uploads_dir/avatar.$ext";
$update = $user->avatarUpdate($email, $avatarPath);
$update = $user->imageUpdate($email, $avatarPath, 'avatar');
$accountinfo = $user->info($email); //update after changing
echo "File upload moved to /$uploads_dir/avatar.$ext";
header("Location: /settings");
Expand All @@ -99,4 +99,72 @@

echo $e->getMessage();

}

try {

// Undefined | Multiple Files | $_FILES Corruption Attack
// If this request falls under any of them, treat it invalid.
if (!isset($_FILES['offline']['error']) || is_array($_FILES['offline']['error'])) {
throw new RuntimeException('Invalid parameters/No file uploaded.');
}

// Check $_FILES['offline']['error'] value.
switch ($_FILES['offline']['error']) {
case UPLOAD_ERR_OK:
break;
case UPLOAD_ERR_NO_FILE:
throw new RuntimeException('No file sent.');
case UPLOAD_ERR_INI_SIZE:
case UPLOAD_ERR_FORM_SIZE:
throw new RuntimeException('Exceeded filesize limit.');
default:
throw new RuntimeException('Unknown errors.');
}

// You should also check filesize here.
if ($_FILES['offline']['size'] > 1000000) {
throw new RuntimeException('Exceeded filesize limit.');
}

// DO NOT TRUST $_FILES['offline']['mime'] VALUE !!
// Check MIME Type by yourself.
$finfo = new finfo(FILEINFO_MIME_TYPE);
if (false === $ext = array_search(
$finfo->file($_FILES['offline']['tmp_name']),
array(
'jpg' => 'image/jpeg',
'png' => 'image/png',
'gif' => 'image/gif',
),
true
)
) {
throw new RuntimeException('Invalid file format.');
}

$uploads_dir = "../profiles/$email"; //TODO -- Fix relative file path issues
$tmp_name = $_FILES["offline"]["tmp_name"];
$name = basename($_FILES["offline"]["name"]);
$ext = pathinfo($name, PATHINFO_EXTENSION);
$ext = strtolower($ext);
if (!is_dir($uploads_dir)) {
$mkdir = mkdir($uploads_dir, 0775);
echo 'Made directory? ' . $mkdir;
}
$moved = move_uploaded_file($tmp_name, "$uploads_dir/offline.$ext");
if ($moved === true) {
$offlinePath = "/$uploads_dir/offline.$ext";
$update = $user->imageUpdate($email, $offlinePath, 'offline');
$accountinfo = $user->info($email); //update after changing
echo "File upload moved to /$uploads_dir/offline.$ext";
header("Location: /settings");
} else {
echo "File upload failed!";
}

} catch (RuntimeException $e) {

echo $e->getMessage();

}

0 comments on commit 22b3b5a

Please sign in to comment.