2019-02-11 02:20:21 +00:00
< template >
2025-01-17 03:45:17 +00:00
< div class = "story-compose-component container mt-2 mt-md-5 bg-black" >
2020-01-28 02:21:18 +00:00
< input type = "file" id = "pf-dz" name = "media" class = "d-none file-input" v -bind :accept = "config.mimes" >
2021-04-28 02:15:31 +00:00
< span class = "fixed-top text-right m-3 cursor-pointer" @click ="navigateTo()" >
2025-01-17 03:45:17 +00:00
< i class = "fal fa-times-circle fa-2x text-lighter" > < / i >
2021-04-28 02:15:31 +00:00
< / span >
2020-07-20 15:24:58 +00:00
< div v-if = "loaded" class="row" >
2025-01-17 03:45:17 +00:00
< div class = "col-12 col-md-6 offset-md-3 bg-dark rounded-lg px-0" >
2019-02-11 02:20:21 +00:00
2020-01-07 06:20:36 +00:00
<!-- LANDING -- >
< div v-if = "page == 'landing'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;" >
2021-04-28 02:15:31 +00:00
< div class = "text-center flex-fill pt-3" >
2025-01-17 03:45:17 +00:00
< 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 >
2020-01-07 06:20:36 +00:00
< / div >
2020-07-20 15:24:58 +00:00
< div class = "flex-fill py-4" >
2025-01-17 03:45:17 +00:00
< p class = "text-center lead font-weight-light text-lighter mb-4" > Share moments with followers that last 24 hours < / p >
2021-04-28 02:15:31 +00:00
< div class = "card w-100 shadow-none bg-transparent" >
2025-01-17 03:45:17 +00:00
< div class = "d-flex" >
< 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()" >
2021-04-28 02:15:31 +00:00
Add to Story
2025-01-17 03:45:17 +00:00
< / button >
<!-- < 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" >
Create Poll
< / button > -- >
2020-01-07 06:20:36 +00:00
< / div >
2025-01-17 03:45:17 +00:00
< 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 >
2020-01-07 06:20:36 +00:00
< / div >
< / div >
< div class = "text-center flex-fill" >
2025-01-17 03:45:17 +00:00
< p class = "text-uppercase mb-0" >
< a href = "/" class = "text-lighter font-weight-bold" > Home < / a >
2020-01-07 06:20:36 +00:00
< span class = "px-2 text-lighter" > | < / span >
2025-01-17 03:45:17 +00:00
< a href = "/site/help" class = "text-lighter font-weight-bold" > Help < / a >
< / p >
< p class = "small text-muted mb-0" > v 1.0 .0 < / p >
2020-01-07 06:20:36 +00:00
< / div >
< / div >
2025-01-17 03:45:17 +00:00
< div v -else -if = " page = = ' crop ' " class = "d-flex justify-content-center flex-fill" style = "position: relative;height: 90vh;" >
< vue-cropper
class = "w-100 h-100 p-0"
ref = "croppa"
: aspectRatio = "cropper.aspectRatio"
: viewMode = "3"
: dragMode = "'move'"
: autoCropArea = "1"
: guides = "false"
: highlight = "false"
: cropBoxMovable = "false"
: cropBoxResizable = "false"
: toggleDragModeOnDblclick = "false"
: src = "mediaUrl"
>
< / 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 >
2020-01-07 06:20:36 +00:00
< / div >
2025-01-17 03:45:17 +00:00
< button
type = "button"
class = "btn btn-outline-light rounded-pill font-weight-bold px-4"
@ click = "performCrop()" >
Next
< / button >
2020-01-07 06:20:36 +00:00
< / div >
< / div >
< / div >
2025-01-17 03:45:17 +00:00
< 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 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 = "text-muted lead" > An error occurred , please try again later . < / p >
< p class = "text-muted mb-0" >
< a class = "btn btn-outline-muted py-0 px-5 rounded-pill font-weight-bold" href = "/" > Go back < / a >
< / p >
< / div >
2020-01-07 06:20:36 +00:00
< / div >
2025-01-17 03:45:17 +00:00
< 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 class = "spinner-border text-lighter" role = "status" >
< span class = "sr-only" > Loading ... < / span >
< / div >
2021-04-28 02:15:31 +00:00
< / div >
2025-01-17 03:45:17 +00:00
< 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 class = "spinner-border text-lighter" role = "status" >
< span class = "sr-only" > Loading ... < / span >
< / div >
2021-04-28 02:15:31 +00:00
< / div >
2025-01-17 03:45:17 +00:00
< 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 >
2021-04-28 02:15:31 +00:00
< label for = "durationSlider" class = "text-light lead font-weight-bold" > Story Duration < / label >
2025-01-17 03:45:17 +00:00
< input type = "range" class = "custom-range" min = "3" :max = "max_duration" step = "1" id = "durationSlider" v-model = "duration" >
2021-04-28 02:15:31 +00:00
< p class = "help-text text-center" >
< span class = "text-light" > { { duration } } seconds < / span >
< / p >
< / div >
< / div >
2025-01-17 03:45:17 +00:00
< div class = "flex-fill w-100 px-md-5" >
< div class = "d-flex" >
< a class = "btn btn-outline-muted btn-block font-weight-bold my-3 mr-3 rounded-pill" href = "/" @click.prevent ="deleteCurrentStory()" >
Cancel
< / 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 >
2020-01-28 03:23:13 +00:00
< / div >
2025-01-17 03:45:17 +00:00
< div v -else -if = " page = = ' edit ' " class = "card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style = "height: 90vh;" >
2021-04-28 02:15:31 +00:00
< div class = "text-center flex-fill mt-5" >
< p class = "text-muted font-weight-light mb-1" >
2025-01-17 03:45:17 +00:00
< i class = "fal fa-history fa-5x" > < / i >
2021-04-28 02:15:31 +00:00
< / p >
< p class = "text-muted font-weight-bold mb-0" > STORIES < / p >
2020-01-07 06:20:36 +00:00
< / div >
2021-04-28 02:15:31 +00:00
< div class = "flex-fill py-4" >
2021-04-30 05:28:26 +00:00
< p class = "lead font-weight-bold text-lighter" > My Stories < / p >
2021-04-28 02:15:31 +00:00
< div class = "card w-100 shadow-none bg-transparent" style = "max-height: 50vh; overflow-y: scroll" >
2020-01-07 06:20:36 +00:00
< div class = "list-group" >
2021-04-28 02:15:31 +00:00
< div v-for = "(story, index) in stories" class="list-group-item bg-transparent text-center border-muted text-lighter" href="#" >
2020-01-07 06:20:36 +00:00
< div class = "media align-items-center" >
2020-03-14 19:14:26 +00:00
< div class = "mr-3 cursor-pointer" @click ="showLightbox(story)" >
2021-04-30 05:28:26 +00:00
< img :src = "story.src" class = "rounded-circle border" width = "40px" height = "40px" style = "object-fit: cover;" >
2020-03-14 19:14:26 +00:00
< / div >
2021-04-28 02:15:31 +00:00
< div class = "media-body text-left" >
2025-01-17 03:45:17 +00:00
< p class = "mb-0 text-muted font-weight-bold" > < span > { { timeago ( story . created _at ) } } ago < / span > < / p >
2020-01-07 06:20:36 +00:00
< / div >
2021-04-30 05:28:26 +00:00
< div class = "flex-grow-1 text-right" >
2021-06-13 06:19:59 +00:00
< button v-if = "story.viewers.length" @click="toggleShowViewers(index)" class="btn btn-link btn-sm mr-1" >
2025-01-17 03:45:17 +00:00
< i class = "fal fa-eye fa-lg text-muted" > < / i >
2021-06-13 06:19:59 +00:00
< / button >
2021-04-30 05:28:26 +00:00
< button @ click = "deleteStory(story, index)" class = "btn btn-link btn-sm" >
2025-01-17 03:45:17 +00:00
< i class = "fal fa-trash-alt fa-lg text-muted" > < / i >
2021-04-30 05:28:26 +00:00
< / button >
2020-01-07 06:20:36 +00:00
< / div >
< / div >
2021-06-13 06:19:59 +00:00
< div v-if = "story.showViewers && story.viewers.length" class="m-2 text-left" >
< p class = "font-weight-bold mb-2" > Viewed By < / p >
< div v-for = "viewer in story.viewers" class="d-flex" >
< img src = "/storage/avatars/default.png" width = "24" height = "24" class = "rounded-circle mr-2" >
< p class = "mb-0 font-weight-bold" > viewer . username < / p >
< / div >
< / div >
2020-01-07 06:20:36 +00:00
< / div >
< / div >
< / div >
< / div >
< div class = "flex-fill text-center" >
2021-04-28 02:15:31 +00:00
< a class = "btn btn-outline-secondary btn-block px-5 font-weight-bold" href = "/i/stories/new" @click.prevent ="goBack()" > Go back < / a >
2020-01-07 06:20:36 +00:00
< / div >
2019-02-11 02:20:21 +00:00
< / div >
2025-01-17 03:45:17 +00:00
< 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 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 >
2019-02-11 02:20:21 +00:00
< / div >
< / div >
2025-01-17 03:45:17 +00:00
2020-01-07 06:20:36 +00:00
< b-modal
id = "lightbox"
ref = "lightboxModal"
hide - header
hide - footer
centered
2021-04-30 05:28:26 +00:00
size = "md"
class = "bg-transparent"
body - class = "p-0 bg-transparent"
2020-01-07 06:20:36 +00:00
>
2021-04-30 05:28:26 +00:00
< div v-if = "lightboxMedia" class="w-100 h-100 bg-transparent" >
< img :src = "lightboxMedia.url" style = "max-height: 90vh; width: 100%; object-fit: contain;" >
2020-01-07 06:20:36 +00:00
< / div >
< / b-modal >
2019-02-11 02:20:21 +00:00
< / div >
< / template >
< script type = "text/javascript" >
2020-01-07 06:20:36 +00:00
import VueTimeago from 'vue-timeago' ;
import VueCropper from 'vue-cropperjs' ;
import 'cropperjs/dist/cropper.css' ;
2025-01-17 03:45:17 +00:00
2019-02-11 02:20:21 +00:00
export default {
2021-04-28 02:15:31 +00:00
components : {
2020-01-07 06:20:36 +00:00
VueCropper ,
VueTimeago
} ,
props : [ 'profile-id' ] ,
2019-02-11 02:20:21 +00:00
data ( ) {
return {
2020-07-20 15:24:58 +00:00
loaded : false ,
2020-01-07 06:20:36 +00:00
config : window . App . config ,
mimes : [
'image/jpeg' ,
2020-07-20 15:24:58 +00:00
'image/png' ,
2025-01-17 03:45:17 +00:00
'video/mp4'
2020-01-07 06:20:36 +00:00
] ,
page : 'landing' ,
pages : [
'landing' ,
'crop' ,
'edit' ,
'confirm' ,
2020-01-28 03:23:13 +00:00
'error' ,
2025-01-17 03:45:17 +00:00
'uploading' ,
'createPoll'
2020-01-07 06:20:36 +00:00
] ,
uploading : false ,
2020-01-28 03:23:13 +00:00
uploadProgress : 0 ,
2020-01-07 06:20:36 +00:00
cropper : {
aspectRatio : 9 / 16 ,
2025-01-17 03:45:17 +00:00
viewMode : 3 ,
2020-01-07 06:20:36 +00:00
zoomable : true ,
zoom : null
} ,
mediaUrl : null ,
2021-04-28 02:15:31 +00:00
mediaId : null ,
2025-01-17 03:45:17 +00:00
mediaType : null ,
2020-01-07 06:20:36 +00:00
stories : [ ] ,
lightboxMedia : false ,
2025-01-17 03:45:17 +00:00
duration : 10 ,
canReply : true ,
canReact : true ,
poll : {
question : null ,
options : [ ]
} ,
pollQuestion : null ,
pollOptions : [ ] ,
canPostPoll : false ,
max _duration : 15
2019-02-11 02:20:21 +00:00
} ;
} ,
2025-01-17 03:45:17 +00:00
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 ;
}
}
} ,
2019-02-11 02:20:21 +00:00
mounted ( ) {
2021-04-28 02:15:31 +00:00
$ ( 'body' ) . addClass ( 'bg-black' ) ;
2020-01-07 06:20:36 +00:00
this . mediaWatcher ( ) ;
2025-01-17 03:45:17 +00:00
setTimeout ( ( ) => {
axios . get ( '/api/web/stories/v1/profile/' + this . profileId )
. then ( res => {
if ( res . data . length ) {
this . stories = res . data [ 0 ] . nodes . map ( s => {
s . showViewers = false ;
s . viewers = [ ] ;
return s ;
} ) ;
}
this . loaded = true ;
2021-06-13 06:19:59 +00:00
} ) ;
2025-01-17 03:45:17 +00:00
} , 400 ) ;
2019-02-11 02:20:21 +00:00
} ,
methods : {
2020-01-07 06:20:36 +00:00
upload ( ) {
let fi = $ ( '.file-input[name="media"]' ) ;
fi . trigger ( 'click' ) ;
} ,
mediaWatcher ( ) {
let self = this ;
$ ( document ) . on ( 'change' , '#pf-dz' , function ( e ) {
self . triggerUpload ( ) ;
} ) ;
} ,
triggerUpload ( ) {
let self = this ;
self . uploading = true ;
let io = document . querySelector ( '#pf-dz' ) ;
2020-01-28 03:23:13 +00:00
self . page = 'uploading' ;
2020-01-07 06:20:36 +00:00
Array . prototype . forEach . call ( io . files , function ( io , i ) {
if ( self . media && self . media . length + i >= self . config . uploader . album _limit ) {
swal ( 'Error' , 'You can only upload ' + self . config . uploader . album _limit + ' photos per album' , 'error' ) ;
self . uploading = false ;
self . page = 2 ;
return ;
}
let type = io . type ;
let validated = $ . inArray ( type , self . mimes ) ;
if ( validated == - 1 ) {
swal ( 'Invalid File Type' , 'The file you are trying to add is not a valid mime type. Please upload a ' + self . mimes + ' only.' , 'error' ) ;
self . uploading = false ;
self . page = 'error' ;
return ;
}
let form = new FormData ( ) ;
form . append ( 'file' , io ) ;
let xhrConfig = {
onUploadProgress : function ( e ) {
2020-01-28 03:23:13 +00:00
let progress = Math . floor ( ( e . loaded * 100 ) / e . total ) ;
2020-01-07 06:20:36 +00:00
self . uploadProgress = progress ;
}
} ;
2021-04-28 02:15:31 +00:00
io . value = null ;
2025-01-17 03:45:17 +00:00
axios . post ( '/api/web/stories/v1/add' , form , xhrConfig )
2020-01-07 06:20:36 +00:00
. then ( function ( e ) {
self . uploadProgress = 100 ;
self . uploading = false ;
self . mediaUrl = e . data . media _url ;
2021-04-28 02:15:31 +00:00
self . mediaId = e . data . media _id ;
2025-01-17 03:45:17 +00:00
self . mediaType = e . data . media _type ;
2021-04-30 05:28:26 +00:00
self . page = e . data . media _type === 'video' ? 'preview' : 'crop' ;
2025-01-17 03:45:17 +00:00
if ( e . data . hasOwnProperty ( 'media_duration' ) ) {
self . max _duration = e . data . media _duration ;
}
2021-04-28 02:15:31 +00:00
// window.location.href = '/i/my/story';
2020-01-07 06:20:36 +00:00
} ) . catch ( function ( e ) {
self . uploading = false ;
io . value = null ;
2025-01-17 03:45:17 +00:00
let msg = e . response . data . message ? e . response . data . message : e . response . data . error ? e . response . data . error : 'Something went wrong.'
2020-01-28 02:21:18 +00:00
swal ( 'Oops!' , msg , 'warning' ) ;
2021-04-30 05:28:26 +00:00
self . page = 'error' ;
2020-01-07 06:20:36 +00:00
} ) ;
self . uploadProgress = 0 ;
} ) ;
2025-01-17 03:45:17 +00:00
document . querySelector ( '#pf-dz' ) . value = '' ;
2020-01-07 06:20:36 +00:00
} ,
expiresTimestamp ( ts ) {
ts = new Date ( ts * 1000 ) ;
return ts . toDateString ( ) + ' ' + ts . toLocaleTimeString ( ) ;
} ,
edit ( ) {
this . page = 'edit' ;
} ,
showLightbox ( story ) {
this . lightboxMedia = {
url : story . src
}
this . $refs . lightboxModal . show ( ) ;
} ,
deleteStory ( story , index ) {
if ( window . confirm ( 'Are you sure you want to delete this Story?' ) != true ) {
return ;
}
2025-01-17 03:45:17 +00:00
axios . delete ( '/api/web/stories/v1/delete/' + story . id )
2020-01-07 06:20:36 +00:00
. then ( res => {
this . stories . splice ( index , 1 ) ;
if ( this . stories . length == 0 ) {
window . location . href = '/i/stories/new' ;
}
} ) ;
2021-04-28 02:15:31 +00:00
} ,
navigateTo ( path = '/' ) {
window . location . href = path ;
} ,
goBack ( ) {
this . page = 'landing' ;
} ,
performCrop ( ) {
this . page = 'cropping' ;
let data = this . $refs . croppa . getData ( ) ;
2025-01-17 03:45:17 +00:00
axios . post ( '/api/web/stories/v1/crop' , {
2021-04-28 02:15:31 +00:00
media _id : this . mediaId ,
width : data . width ,
height : data . height ,
x : data . x ,
y : data . y
} ) . then ( res => {
this . page = 'preview' ;
} ) ;
} ,
deleteCurrentStory ( ) {
let story = {
id : this . mediaId
} ;
this . deleteStory ( story ) ;
this . page = 'landing' ;
} ,
2020-01-07 06:20:36 +00:00
2021-04-28 02:15:31 +00:00
shareStoryToFollowers ( ) {
2025-01-17 03:45:17 +00:00
if ( this . canPostPoll ) {
axios . post ( '/api/web/stories/v1/publish/poll' , {
question : this . pollQuestion ,
options : this . pollOptions ,
can _reply : this . canReply ,
can _react : this . canReact
} ) . then ( res => {
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 ;
} )
}
2021-04-30 05:28:26 +00:00
} ,
viewMyStory ( ) {
window . location . href = '/i/my/story' ;
2021-06-13 06:19:59 +00:00
} ,
toggleShowViewers ( index ) {
this . stories [ index ] . showViewers = this . stories [ index ] . showViewers ? false : true ;
2025-01-17 03:45:17 +00:00
} ,
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' ;
2019-02-11 02:20:21 +00:00
}
}
}
2021-04-28 02:15:31 +00:00
< / script >
2025-01-17 03:45:17 +00:00
< 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 : 100 px ;
padding : 15 px 30 px ;
background : linear - gradient ( 180 deg , rgba ( 38 , 38 , 38 , 0.8 ) 0 % , rgba ( 38 , 38 , 38 , 0 ) 100 % ) ;
}
}
< / style >
