UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2025-01-18 02:20:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5503 from pixelfed/staging

Browse source 
Staging
This commit is contained in:
daniel 2025-01-16 20:46:44 -07:00 committed by GitHub
commit 0cc9ed3634
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 1279 additions and 235 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Util/ActivityPub/Helpers.php
View file

@ -599,7 +599,7 @@ class Helpers
$reply_to = self::getReplyTo($activity); $reply_to = self::getReplyTo($activity);
$ts = self::pluckval($activity['published']); $ts = self::pluckval($activity['published']);
$scope = self::getScope($activity, $url); $scope = self::getScope($activity, $url);
$commentsDisabled = $activity['commentsEnabled'] ?? false; $commentsDisabled = isset($activity['commentsEnabled']) ? (bool)$activity['commentsEnabled'] == false : false;
$cw = self::getSensitive($activity, $url); $cw = self::getSensitive($activity, $url);
if ($profile->unlisted) { if ($profile->unlisted) {

417
resources/assets/js/components/StoryCompose.vue
View file

@ -1,154 +1,167 @@
<template> <template>
<div class="container mt-2 mt-md-5 bg-black"> <div class="story-compose-component container mt-2 mt-md-5 bg-black">
<input type="file" id="pf-dz" name="media" class="d-none file-input" v-bind:accept="config.mimes"> <input type="file" id="pf-dz" name="media" class="d-none file-input" v-bind:accept="config.mimes">
<span class="fixed-top text-right m-3 cursor-pointer" @click="navigateTo()"> <span class="fixed-top text-right m-3 cursor-pointer" @click="navigateTo()">
<i class="fas fa-times fa-lg text-white"></i> <i class="fal fa-times-circle fa-2x text-lighter"></i>
</span> </span>
<div v-if="loaded" class="row"> <div v-if="loaded" class="row">
<div class="col-12 col-md-6 offset-md-3 bg-dark rounded-lg"> <div class="col-12 col-md-6 offset-md-3 bg-dark rounded-lg px-0">
<!-- LANDING --> <!-- LANDING -->
<div v-if="page == 'landing'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;"> <div v-if="page == 'landing'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
<div class="text-center flex-fill pt-3"> <div class="text-center flex-fill pt-3">
<p class="text-muted font-weight-light mb-1"> <img class="mb-2" src="/img/pixelfed-icon-color.svg" width="70" height="70">
<i class="fas fa-history fa-5x"></i> <p class="lead text-lighter font-weight-light mb-0">Stories</p>
</p>
<p class="text-muted font-weight-bold mb-0">STORIES</p>
</div> </div>
<div class="flex-fill py-4"> <div class="flex-fill py-4">
<p class="text-center lead font-weight-light text-lighter mb-4">Share moments with followers that last 24 hours</p>
<div class="card w-100 shadow-none bg-transparent"> <div class="card w-100 shadow-none bg-transparent">
<div class="list-group bg-transparent"> <div class="d-flex">
<!-- <a class="list-group-item text-center lead text-decoration-none text-dark" href="#">Camera</a> --> <button type="button" class="btn btn-outline-light btn-lg font-weight-bold btn-block rounded-pill my-1" :disabled="stories.length >= 20" @click="upload()">
<a class="list-group-item bg-transparent lead text-decoration-none text-light font-weight-bold border-light" href="#" @click.prevent="upload()">
<i class="fas fa-plus-square mr-2"></i>
Add to Story Add to Story
</a> </button>
<a v-if="stories.length" class="list-group-item bg-transparent lead text-decoration-none text-lighter font-weight-bold border-muted" href="#" @click.prevent="edit()"> <!-- <button :disabled="stories.length >= 20" type="button" class="btn btn-outline-light btn-lg font-weight-bold btn-block rounded-pill my-1 ml-2" @click="newPoll">
<i class="far fa-clone mr-2"></i> Create Poll
My Story </button> -->
</a>
<a v-if="stories.length" class="list-group-item bg-transparent lead text-decoration-none text-lighter font-weight-bold border-muted" href="#" @click.prevent="viewMyStory()">
<i class="fas fa-history mr-2"></i>
View My Story
</a>
<!-- <a v-if="stories.length" class="list-group-item bg-transparent lead text-decoration-none text-lighter font-weight-bold border-muted" href="#" @click.prevent="edit()">
<i class="fas fa-network-wired mr-1"></i>
Audience
</a> -->
<!-- <a v-if="stories.length" class="list-group-item bg-transparent lead text-decoration-none text-lighter font-weight-bold border-muted" href="#" @click.prevent="edit()">
<i class="far fa-chart-bar mr-2"></i>
Stats
</a> -->
<!-- <a class="list-group-item bg-transparent lead text-decoration-none text-lighter font-weight-bold border-muted" href="#" @click.prevent="edit()">
<i class="far fa-folder mr-2"></i>
Archived
</a> -->
<!-- <a class="list-group-item bg-transparent lead text-decoration-none text-lighter font-weight-bold border-muted" href="#" @click.prevent="edit()">
<i class="far fa-question-circle mr-2"></i>
Help
</a> -->
<a class="list-group-item bg-transparent lead text-decoration-none text-lighter font-weight-bold border-muted" href="/">
<i class="fas fa-arrow-left mr-2"></i>
Go back
</a>
<!-- <a class="list-group-item text-center lead text-decoration-none text-dark" href="#">Options</a> -->
</div> </div>
<p
v-if="stories.length >= 20"
class="font-weight-bold text-muted text-center">
You have reached the limit for new stories
</p>
<button
type="button"
class="btn btn-outline-light btn-lg font-weight-bold btn-block rounded-pill my-3"
@click="viewMyStory"
:disabled="stories.length == 0">
<span>My Story</span>
<sup v-if="stories.length" class="ml-2 px-2 text-light bg-danger rounded-pill" style="font-size: 12px;padding-top:2px;padding-bottom:3px;">{{ stories.length }}</sup>
</button>
</div> </div>
</div> </div>
<div class="text-center flex-fill"> <div class="text-center flex-fill">
<!-- <p class="text-lighter small text-uppercase"> <p class="text-uppercase mb-0">
<a href="/" class="text-muted font-weight-bold">Home</a> <a href="/" class="text-lighter font-weight-bold">Home</a>
<span class="px-2 text-lighter">|</span> <span class="px-2 text-lighter">|</span>
<a href="/i/my/story" class="text-muted font-weight-bold">View My Story</a> <a href="/site/help" class="text-lighter font-weight-bold">Help</a>
<span class="px-2 text-lighter">|</span> </p>
<a href="/site/help" class="text-muted font-weight-bold">Help</a> <p class="small text-muted mb-0">v 1.0.0</p>
</p> -->
</div> </div>
</div> </div>
<!-- CROP --> <div v-else-if="page == 'crop'" class="d-flex justify-content-center flex-fill" style="position: relative;height: 90vh;">
<div v-if="page == 'crop'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
<div class="text-center py-3 d-flex justify-content-between align-items-center">
<div>
<button class="btn btn-outline-lighter btn-sm py-1 px-md-3" @click="deleteCurrentStory()"><i class="pr-2 fas fa-chevron-left fa-sm"></i> Delete</button>
</div>
<div class="">
<p class="text-muted font-weight-light mb-1">
<i class="fas fa-history fa-5x"></i>
</p>
<p class="text-muted font-weight-bold mb-0">STORIES</p>
</div>
<div>
<button class="btn btn-primary btn-sm py-1 px-md-3" @click="performCrop()">Crop <i class="pl-2 fas fa-chevron-right fa-sm"></i></button>
</div>
</div>
<div class="flex-fill">
<div class="card w-100 mt-3">
<div class="card-body p-0">
<vue-cropper <vue-cropper
class="w-100 h-100 p-0"
ref="croppa" ref="croppa"
:relativeZoom="cropper.zoom"
:aspectRatio="cropper.aspectRatio" :aspectRatio="cropper.aspectRatio"
:viewMode="cropper.viewMode" :viewMode="3"
:zoomable="cropper.zoomable" :dragMode="'move'"
:rotatable="true" :autoCropArea="1"
:guides="false"
:highlight="false"
:cropBoxMovable="false"
:cropBoxResizable="false"
:toggleDragModeOnDblclick="false"
:src="mediaUrl" :src="mediaUrl"
> >
</vue-cropper> </vue-cropper>
<div class="crop-container">
<div class="d-flex justify-content-between align-items-center">
<button
type="button"
class="btn btn-outline-muted rounded-pill font-weight-bold px-4"
@click="deleteCurrentStory()">
Cancel
</button>
<div class="text-center">
<h4 class="font-weight-light text-light mb-n1">Crop</h4>
<span class="small text-light">Pan around and pinch to zoom</span>
</div> </div>
<button
type="button"
class="btn btn-outline-light rounded-pill font-weight-bold px-4"
@click="performCrop()">
Next
</button>
</div> </div>
</div> </div>
</div> </div>
<!-- ERROR --> <div v-else-if="page == 'error'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
<div v-if="page == 'error'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;"> <div class="text-center flex-fill pt-3">
<img class="mb-2" src="/img/pixelfed-icon-color.svg" width="70" height="70">
<p class="lead text-lighter font-weight-light mb-0">Stories</p>
</div>
<div class="flex-fill text-center">
<p class="h3 mb-0 text-light">Oops!</p> <p class="h3 mb-0 text-light">Oops!</p>
<p class="text-muted lead">An error occurred, please try again later.</p> <p class="text-muted lead">An error occurred, please try again later.</p>
<p class="text-muted mb-0"> <p class="text-muted mb-0">
<a class="btn btn-outline-secondary py-0 px-5 font-weight-bold" href="/">Go back</a> <a class="btn btn-outline-muted py-0 px-5 rounded-pill font-weight-bold" href="/">Go back</a>
</p> </p>
</div> </div>
<!-- UPLOADING -->
<div v-if="page == 'uploading'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
<p v-if="uploadProgress != 100" class="display-4 mb-0 text-muted">Uploading {{uploadProgress}}%</p>
<p v-else class="display-4 mb-0 text-muted">Processing ...</p>
</div> </div>
<!-- CROPPING --> <div v-else-if="page == 'uploading'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
<div v-if="page == 'cropping'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;"> <div class="spinner-border text-lighter" role="status">
<p class="display-4 mb-0 text-muted">Cropping ...</p> <span class="sr-only">Loading...</span>
</div>
</div> </div>
<!-- PREVIEW --> <div v-else-if="page == 'cropping'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
<div v-if="page == 'preview'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;"> <div class="spinner-border text-lighter" role="status">
<div> <span class="sr-only">Loading...</span>
<div class="form-group"> </div>
</div>
<div v-else-if="page == 'preview'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
<div class="text-center flex-fill pt-3">
<img class="mb-2" src="/img/pixelfed-icon-color.svg" width="70" height="70">
<p class="lead text-lighter font-weight-light mb-0">Stories</p>
</div>
<div class="flex-fill">
<div class="form-group pb-3">
<label for="durationSlider" class="text-light lead font-weight-bold">Options</label>
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="optionReplies" v-model="canReply">
<label class="custom-control-label text-light font-weight-lighter" for="optionReplies">Allow replies</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="formReactions" v-model="canReact">
<label class="custom-control-label text-light font-weight-lighter" for="formReactions">Allow reactions</label>
</div>
</div>
<div v-if="!canPostPoll" class="form-group">
<video ref="previewVideo" v-if="mediaType == 'video'" class="mb-4 w-100" style="max-height:200px;object-fit:contain;">
<source :src="mediaUrl" type="video/mp4">
</video>
<label for="durationSlider" class="text-light lead font-weight-bold">Story Duration</label> <label for="durationSlider" class="text-light lead font-weight-bold">Story Duration</label>
<input type="range" class="custom-range" min="3" max="10" id="durationSlider" v-model="duration"> <input type="range" class="custom-range" min="3" :max="max_duration" step="1" id="durationSlider" v-model="duration">
<p class="help-text text-center"> <p class="help-text text-center">
<span class="text-light">{{duration}} seconds</span> <span class="text-light">{{duration}} seconds</span>
</p> </p>
</div> </div>
<hr class="my-3"> </div>
<a class="btn btn-primary btn-block px-5 font-weight-bold my-3" href="#" @click.prevent="shareStoryToFollowers()"> <div class="flex-fill w-100 px-md-5">
Share Story with followers <div class="d-flex">
</a> <a class="btn btn-outline-muted btn-block font-weight-bold my-3 mr-3 rounded-pill" href="/" @click.prevent="deleteCurrentStory()">
<a class="btn btn-outline-muted btn-block px-5 font-weight-bold" href="/" @click.prevent="deleteCurrentStory()">
Cancel Cancel
</a> </a>
<a class="btn btn-primary btn-block font-weight-bold my-3 rounded-pill" href="#" @click.prevent="shareStoryToFollowers()">
Post {{ canPostPoll ? 'Poll' : 'Story'}}
</a>
</div>
</div> </div>
<!-- <a class="btn btn-outline-secondary btn-block px-5 font-weight-bold" href="#">
Share Story with everyone
</a> -->
</div> </div>
<!-- EDIT --> <div v-else-if="page == 'edit'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
<div v-if="page == 'edit'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
<div class="text-center flex-fill mt-5"> <div class="text-center flex-fill mt-5">
<p class="text-muted font-weight-light mb-1"> <p class="text-muted font-weight-light mb-1">
<i class="fas fa-history fa-5x"></i> <i class="fal fa-history fa-5x"></i>
</p> </p>
<p class="text-muted font-weight-bold mb-0">STORIES</p> <p class="text-muted font-weight-bold mb-0">STORIES</p>
</div> </div>
@ -162,14 +175,14 @@
<img :src="story.src" class="rounded-circle border" width="40px" height="40px" style="object-fit: cover;"> <img :src="story.src" class="rounded-circle border" width="40px" height="40px" style="object-fit: cover;">
</div> </div>
<div class="media-body text-left"> <div class="media-body text-left">
<p class="mb-0 text-muted font-weight-bold"><span>{{story.created_ago}} ago</span></p> <p class="mb-0 text-muted font-weight-bold"><span>{{timeago(story.created_at)}} ago</span></p>
</div> </div>
<div class="flex-grow-1 text-right"> <div class="flex-grow-1 text-right">
<button v-if="story.viewers.length" @click="toggleShowViewers(index)" class="btn btn-link btn-sm mr-1"> <button v-if="story.viewers.length" @click="toggleShowViewers(index)" class="btn btn-link btn-sm mr-1">
<i class="fas fa-eye fa-lg text-muted"></i> <i class="fal fa-eye fa-lg text-muted"></i>
</button> </button>
<button @click="deleteStory(story, index)" class="btn btn-link btn-sm"> <button @click="deleteStory(story, index)" class="btn btn-link btn-sm">
<i class="fas fa-trash-alt fa-lg text-muted"></i> <i class="fal fa-trash-alt fa-lg text-muted"></i>
</button> </button>
</div> </div>
</div> </div>
@ -188,8 +201,58 @@
<a class="btn btn-outline-secondary btn-block px-5 font-weight-bold" href="/i/stories/new" @click.prevent="goBack()">Go back</a> <a class="btn btn-outline-secondary btn-block px-5 font-weight-bold" href="/i/stories/new" @click.prevent="goBack()">Go back</a>
</div> </div>
</div> </div>
<div v-else-if="page == 'createPoll'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
<div class="text-center pt-3">
<img class="mb-2" src="/img/pixelfed-icon-color.svg" width="70" height="70">
<p class="lead text-lighter font-weight-light mb-0">Stories</p>
</div>
<div class="flex-fill mt-3">
<div class="align-items-center">
<div class="form-group mb-5">
<label class="font-weight-bold text-lighter">Poll Question</label>
<input class="form-control form-control-lg rounded-pill bg-muted shadow text-white border-0" placeholder="Ask a poll question here..." v-model="pollQuestion" />
</div>
<label class="font-weight-bold text-lighter">Poll Answers</label>
<div v-for="(option, index) in pollOptions" class="form-group mb-4">
<input class="form-control form-control-lg rounded-pill bg-muted shadow text-white border-0" placeholder="Add a poll answer here..." v-model="pollOptions[index]" />
</div>
<div v-if="pollOptions.length < 4" class="mb-3">
<button
class="btn btn-block font-weight-bold rounded-pill shadow"
:class="[ (pollQuestion && pollQuestion.length) > 6 && (pollOptions.length == 0 || pollOptions.length && pollOptions[pollOptions.length - 1].length > 3) ? 'btn-muted' : 'btn-outline-muted' ]"
:disabled="!pollQuestion || pollQuestion.length < 6"
@click="addOptionInput">
Add poll option
</button>
</div>
<!-- <div v-for="(option, index) in pollOptions" class="form-group mb-4 d-flex align-items-center" style="max-width:400px;position: relative;">
<span class="font-weight-bold mr-2" style="position: absolute;left: 10px;">{{ index + 1 }}.</span>
<input v-if="pollOptions[index].length < 50" type="text" class="form-control rounded-pill" placeholder="Add a poll option, press enter to save" v-model="pollOptions[index]" style="padding-left: 30px;padding-right: 90px;">
<textarea v-else class="form-control" v-model="pollOptions[index]" placeholder="Add a poll option, press enter to save" rows="3" style="padding-left: 30px;padding-right:90px;"></textarea>
<button class="btn btn-danger btn-sm rounded-pill font-weight-bold" style="position: absolute;right: 5px;" @click="deletePollOption(index)">
<i class="fas fa-trash"></i> Delete
</button>
</div> -->
</div> </div>
</div> </div>
<div class="flex-fill text-center">
<a v-if="canPostPoll" class="btn btn-outline-light btn-block px-5 font-weight-bold rounded-pill" href="/i/stories/new" @click.prevent="pollPreview">Next</a>
<a class="btn btn-outline-secondary btn-block px-5 font-weight-bold rounded-pill" href="/i/stories/new" @click.prevent="goBack()">Go back</a>
</div>
</div>
</div>
</div>
<div v-else class="row">
<div class="col-12 col-md-6 offset-md-3 bg-dark rounded-lg px-0" style="height: 90vh;">
<div class="w-100 h-100 d-flex justify-content-center align-items-center">
<div class="spinner-border text-lighter" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
<b-modal <b-modal
id="lightbox" id="lightbox"
ref="lightboxModal" ref="lightboxModal"
@ -207,19 +270,11 @@
</div> </div>
</template> </template>
<style type="text/css">
.bg-black {
background-color: #262626;
}
#lightbox .modal-content {
background: transparent;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
import VueTimeago from 'vue-timeago'; import VueTimeago from 'vue-timeago';
import VueCropper from 'vue-cropperjs'; import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css'; import 'cropperjs/dist/cropper.css';
export default { export default {
components: { components: {
VueCropper, VueCropper,
@ -234,7 +289,7 @@
mimes: [ mimes: [
'image/jpeg', 'image/jpeg',
'image/png', 'image/png',
// 'video/mp4' 'video/mp4'
], ],
page: 'landing', page: 'landing',
pages: [ pages: [
@ -243,36 +298,79 @@
'edit', 'edit',
'confirm', 'confirm',
'error', 'error',
'uploading' 'uploading',
'createPoll'
], ],
uploading: false, uploading: false,
uploadProgress: 0, uploadProgress: 0,
cropper: { cropper: {
aspectRatio: 9/16, aspectRatio: 9/16,
viewMode: 2, viewMode: 3,
zoomable: true, zoomable: true,
zoom: null zoom: null
}, },
mediaUrl: null, mediaUrl: null,
mediaId: null, mediaId: null,
mediaType: null,
stories: [], stories: [],
lightboxMedia: false, lightboxMedia: false,
duration: 3 duration: 10,
canReply: true,
canReact: true,
poll: {
question: null,
options: []
},
pollQuestion: null,
pollOptions: [],
canPostPoll: false,
max_duration: 15
}; };
}, },
watch: {
duration: function(val) {
if(this.mediaType == 'video') {
this.$refs.previewVideo.currentTime = val;
this.$refs.previewVideo.play();
}
},
pollQuestion: function(val) {
if(val.length < 6) {
this.canPostPoll = false;
}
},
pollOptions: function(val) {
let len = this.pollOptions.filter(o => {
return o.length >= 2;
});
if(len.length >= 2) {
this.canPostPoll = true;
} else {
this.canPostPoll = false;
}
}
},
mounted() { mounted() {
$('body').addClass('bg-black'); $('body').addClass('bg-black');
this.mediaWatcher(); this.mediaWatcher();
axios.get('/api/stories/v0/fetch/' + this.profileId) setTimeout(() => {
axios.get('/api/web/stories/v1/profile/' + this.profileId)
.then(res => { .then(res => {
this.stories = res.data.map(s => { if(res.data.length) {
this.stories = res.data[0].nodes.map(s => {
s.showViewers = false; s.showViewers = false;
s.viewers = []; s.viewers = [];
return s; return s;
}); });
}
this.loaded = true; this.loaded = true;
}); });
}, 400);
}, },
methods: { methods: {
@ -321,23 +419,28 @@
}; };
io.value = null; io.value = null;
axios.post('/api/stories/v0/add', form, xhrConfig) axios.post('/api/web/stories/v1/add', form, xhrConfig)
.then(function(e) { .then(function(e) {
self.uploadProgress = 100; self.uploadProgress = 100;
self.uploading = false; self.uploading = false;
self.mediaUrl = e.data.media_url; self.mediaUrl = e.data.media_url;
self.mediaId = e.data.media_id; self.mediaId = e.data.media_id;
self.mediaType = e.data.media_type;
self.page = e.data.media_type === 'video' ? 'preview' : 'crop'; self.page = e.data.media_type === 'video' ? 'preview' : 'crop';
if(e.data.hasOwnProperty('media_duration')) {
self.max_duration = e.data.media_duration;
}
// window.location.href = '/i/my/story'; // window.location.href = '/i/my/story';
}).catch(function(e) { }).catch(function(e) {
self.uploading = false; self.uploading = false;
io.value = null; io.value = null;
let msg = e.response.data.message ? e.response.data.message : 'Something went wrong.' let msg = e.response.data.message ? e.response.data.message : e.response.data.error ? e.response.data.error :'Something went wrong.'
swal('Oops!', msg, 'warning'); swal('Oops!', msg, 'warning');
self.page = 'error'; self.page = 'error';
}); });
self.uploadProgress = 0; self.uploadProgress = 0;
}); });
document.querySelector('#pf-dz').value = '';
}, },
expiresTimestamp(ts) { expiresTimestamp(ts) {
@ -361,7 +464,7 @@
return; return;
} }
axios.delete('/api/stories/v0/delete/' + story.id) axios.delete('/api/web/stories/v1/delete/' + story.id)
.then(res => { .then(res => {
this.stories.splice(index, 1); this.stories.splice(index, 1);
if(this.stories.length == 0) { if(this.stories.length == 0) {
@ -381,7 +484,7 @@
performCrop() { performCrop() {
this.page = 'cropping'; this.page = 'cropping';
let data = this.$refs.croppa.getData(); let data = this.$refs.croppa.getData();
axios.post('/api/stories/v0/crop', { axios.post('/api/web/stories/v1/crop', {
media_id: this.mediaId, media_id: this.mediaId,
width: data.width, width: data.width,
height: data.height, height: data.height,
@ -401,12 +504,25 @@
}, },
shareStoryToFollowers() { shareStoryToFollowers() {
axios.post('/api/stories/v0/publish', { if(this.canPostPoll) {
media_id: this.mediaId, axios.post('/api/web/stories/v1/publish/poll', {
duration: this.duration question: this.pollQuestion,
options: this.pollOptions,
can_reply: this.canReply,
can_react: this.canReact
}).then(res => { }).then(res => {
window.location.href = '/i/my/story?id=' + this.mediaId; window.location.href = '/i/my/story?id=' + this.mediaId;
}) })
} else {
axios.post('/api/web/stories/v1/publish', {
media_id: this.mediaId,
duration: this.duration,
can_reply: this.canReply,
can_react: this.canReact
}).then(res => {
window.location.href = '/i/my/story?id=' + this.mediaId;
})
}
}, },
viewMyStory() { viewMyStory() {
@ -415,7 +531,62 @@
toggleShowViewers(index) { toggleShowViewers(index) {
this.stories[index].showViewers = this.stories[index].showViewers ? false : true; this.stories[index].showViewers = this.stories[index].showViewers ? false : true;
},
timeago(ts) {
return App.util.format.timeAgo(ts);
},
newPoll() {
this.page = 'createPoll';
},
addOptionInput() {
let c = this.pollOptions.filter(o => {
return o.length < 3;
});
if(c.length) {
return;
}
this.pollOptions.push([]);
},
pollPreview() {
let opts = this.pollOptions;
let dd = [...new Set(this.pollOptions)];
if(dd.length != opts.length) {
swal('Oops!', 'You cannot use duplicate poll answers, please remove any duplicates and try again.', 'error');
return;
}
this.page = 'preview';
} }
} }
} }
</script> </script>
<style lang="scss">
.bg-black {
background-color: #262626;
}
</style>
<style lang="scss" scoped>
.story-compose-component {
#lightbox .modal-content {
background: transparent;
}
::placeholder {
color: #ccc;
}
.crop-container {
z-index: 9;
position: absolute;
top: 0;
width: 100%;
min-height: 100px;
padding: 15px 30px;
background: linear-gradient(180deg, rgba(38,38,38, 0.8) 0%, rgba(38,38,38,0) 100%);
}
}
</style>

17
resources/assets/js/components/StoryTimelineComponent.vue
View file

@ -11,7 +11,8 @@
v-for="(story, index) in stories" v-for="(story, index) in stories"
class="px-3 pt-3 text-center cursor-pointer" class="px-3 pt-3 text-center cursor-pointer"
:class="{ seen: story.seen }" :class="{ seen: story.seen }"
@click="showStory(index)"> @click="showStory(index)"
>
<span <span
:class="[ :class="[
story.seen ? 'not-seen' : '', story.seen ? 'not-seen' : '',
@ -24,6 +25,8 @@
class="small font-weight-bold text-truncate" class="small font-weight-bold text-truncate"
:class="{ 'text-lighter': story.seen }" :class="{ 'text-lighter': story.seen }"
style="max-width: 69px" style="max-width: 69px"
v-b-tooltip.hover
placement="bottom"
:title="story.username" :title="story.username"
> >
{{story.username}} {{story.username}}
@ -118,6 +121,18 @@
background: #fff; background: #fff;
padding: 3px; padding: 3px;
} }
&.new {
background: none;
width: 70px;
height: 70px;
border: dashed 4px #d92d77;
img {
width: 56px;
height: 56px;
}
}
} }
.scrolly { .scrolly {

988
resources/assets/js/components/StoryViewer.vue
View file

File diff suppressed because it is too large Load diff