Possibilité de partager un album sur le fédiverse
This commit is contained in:
parent
e28f382c6c
commit
205474a701
5 changed files with 184 additions and 2 deletions
|
|
@ -4,6 +4,8 @@ if (typeof item !== "undefined") {
|
|||
return {
|
||||
// eslint-disable-next-line no-undef
|
||||
item,
|
||||
// eslint-disable-next-line no-undef
|
||||
canShareItem,
|
||||
tracklist: [],
|
||||
identifiers: [],
|
||||
modalIsVisible: false,
|
||||
|
|
@ -12,6 +14,11 @@ if (typeof item !== "undefined") {
|
|||
preview: null,
|
||||
index: null,
|
||||
showModalDelete: false,
|
||||
showModalShare: false,
|
||||
shareMessage: "",
|
||||
shareMessageTransformed: "",
|
||||
shareMessageLength: 0,
|
||||
shareSubmiting: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -23,6 +30,26 @@ if (typeof item !== "undefined") {
|
|||
destroyed() {
|
||||
window.removeEventListener("keydown", this.changeImage);
|
||||
},
|
||||
watch: {
|
||||
shareMessage(message) {
|
||||
const video =
|
||||
this.item.videos && this.item.videos.length > 0
|
||||
? this.item.videos[0].uri
|
||||
: "";
|
||||
|
||||
this.shareMessageTransformed = message
|
||||
.replaceAll("{artist}", this.item.artists[0].name)
|
||||
.replaceAll("{format}", this.item.formats[0].name)
|
||||
.replaceAll("{year}", this.item.year)
|
||||
.replaceAll("{video}", video)
|
||||
.replaceAll("{album}", this.item.title);
|
||||
|
||||
this.shareMessageLength = this.shareMessageTransformed.replace(
|
||||
video,
|
||||
new Array(36).join("#")
|
||||
).length;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setIdentifiers() {
|
||||
this.identifiers = [];
|
||||
|
|
@ -189,6 +216,33 @@ if (typeof item !== "undefined") {
|
|||
goToArtist() {
|
||||
return "";
|
||||
},
|
||||
shareAlbum() {
|
||||
if (this.shareSubmiting) {
|
||||
return false;
|
||||
}
|
||||
this.shareSubmiting = true;
|
||||
axios
|
||||
.post(`/api/v1/albums/${this.item._id}/share`, {
|
||||
message: this.shareMessageTransformed,
|
||||
})
|
||||
.then(() => {
|
||||
showToastr("Album partagé", true);
|
||||
this.shareMessage = "";
|
||||
this.showModalShare = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
showToastr(
|
||||
err.response?.data?.message ||
|
||||
"Impossible de partager cet album",
|
||||
false
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
this.shareSubmiting = false;
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
},
|
||||
}).mount("#ma-collection-details");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,13 +31,12 @@
|
|||
max-width: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--input-color);
|
||||
border: 1px solid transparent !important;
|
||||
border: 1px solid var(--input-active-color) !important;
|
||||
color: var(--input-font-color);
|
||||
@include transition() {}
|
||||
|
||||
&:focus-visible {
|
||||
outline: unset;
|
||||
border-color: var(--input-active-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -312,6 +312,83 @@ Publié automatiquement via #musictopus`;
|
|||
);
|
||||
}
|
||||
|
||||
async shareOne() {
|
||||
const { message: status } = this.req.body;
|
||||
const { itemId: _id } = this.req.params;
|
||||
const { _id: User } = this.req.user;
|
||||
const query = {
|
||||
_id,
|
||||
User,
|
||||
};
|
||||
|
||||
const album = await AlbumsModel.findOne(query);
|
||||
|
||||
if (!album) {
|
||||
throw new ErrorEvent(
|
||||
404,
|
||||
"Mise à jour",
|
||||
"Impossible de trouver cet album"
|
||||
);
|
||||
}
|
||||
|
||||
const { mastodon: mastodonConfig } = this.req.user;
|
||||
const { publish, token, url } = mastodonConfig;
|
||||
|
||||
if (publish && url && token) {
|
||||
const M = new Mastodon({
|
||||
access_token: token,
|
||||
api_url: url,
|
||||
});
|
||||
|
||||
const media_ids = [];
|
||||
|
||||
if (album.images.length > 0) {
|
||||
for (let i = 0; i < album.images.length; i += 1) {
|
||||
if (media_ids.length === 4) {
|
||||
break;
|
||||
}
|
||||
|
||||
const filename = `${v4()}.jpg`;
|
||||
const file = `/tmp/${filename}`;
|
||||
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
const { data: buff } = await axios.get(
|
||||
album.images[i].uri,
|
||||
{
|
||||
headers: {
|
||||
"User-Agent":
|
||||
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/117.0",
|
||||
},
|
||||
responseType: "arraybuffer",
|
||||
}
|
||||
);
|
||||
|
||||
fs.writeFileSync(file, buff);
|
||||
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
const { data: media } = await M.post("media", {
|
||||
file: fs.createReadStream(file),
|
||||
});
|
||||
|
||||
const { id } = media;
|
||||
|
||||
media_ids.push(id);
|
||||
|
||||
fs.unlinkSync(file);
|
||||
}
|
||||
}
|
||||
|
||||
await M.post("statuses", { status, media_ids });
|
||||
} else {
|
||||
throw new ErrorEvent(
|
||||
406,
|
||||
`Vous n'avez pas configuré vos options de partage sur votre compte`
|
||||
);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Méthode permettant de créer la page "ma-collection"
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -68,4 +68,17 @@ router
|
|||
}
|
||||
});
|
||||
|
||||
router
|
||||
.route("/:itemId/share")
|
||||
.post(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||
try {
|
||||
const albums = new Albums(req);
|
||||
const data = await albums.shareOne();
|
||||
|
||||
sendResponse(req, res, data);
|
||||
} catch (err) {
|
||||
next(err);
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
- {{item.title}}
|
||||
<i class="icon-trash" title="Supprimer cette fiche" @click="showConfirmDelete()"></i>
|
||||
<i class="icon-refresh" title="Mettre à jour les données de cette fiche" @click="updateItem()"></i>
|
||||
<i class="icon-share" title="Partager cet album sur le fédiverse" @click="showModalShare = true" v-if="canShareItem"></i>
|
||||
</h1>
|
||||
<div class="grid sm:grid-cols-3 gap-16">
|
||||
<div class="text-center">
|
||||
|
|
@ -182,8 +183,46 @@
|
|||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" :class="{'is-visible': showModalShare}">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header>Partager un album sur le fédiverse</header>
|
||||
<section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
<div class="field">
|
||||
<label for="shareMessage">Message</label>
|
||||
<textarea
|
||||
name="shareMessage"
|
||||
id="shareMessage"
|
||||
v-model="shareMessage"
|
||||
rows="6"
|
||||
></textarea>
|
||||
Caractères utilisés : {{ shareMessageLength }}
|
||||
</div>
|
||||
<div>
|
||||
<small>
|
||||
Variables possibles :
|
||||
<ul>
|
||||
<li>{artist}, exemple : Iron Maiden</li>
|
||||
<li>{album}, exemple : Powerslave</li>
|
||||
<li>{format}, exemple : Cassette</li>
|
||||
<li>{year}, exemple: 1984</li>
|
||||
<li>{video}, exemple : https://www.youtube.com/watch?v=Qx0s8OqgBIw</li>
|
||||
</ul>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<button :class="['button is-primary', shareSubmiting ? 'is-disabled' : '']" @click="shareAlbum">Partager</button>
|
||||
<button class="button" @click="showModalShare=!showModalShare">Annuler</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const item = <%- JSON.stringify(page.item) %>;
|
||||
const canShareItem = <%= user.mastodon?.publish || false %>;
|
||||
</script>
|
||||
Loading…
Reference in a new issue