Collections

freesound/context_processor.py

@@ -76,7 +76,8 @@ def context_extra(request):
             'next_path': request.GET.get('next', request.get_full_path()),
             'login_form': FsAuthenticationForm(),
             'problems_logging_in_form': ProblemsLoggingInForm(),
-            'system_prefers_dark_theme': request.COOKIES.get('systemPrefersDarkTheme', 'no') == 'yes'  # Determine the user's system preference for dark/light theme (for non authenticated users, always use light theme)
+            'system_prefers_dark_theme': request.COOKIES.get('systemPrefersDarkTheme', 'no') == 'yes',  # Determine the user's system preference for dark/light theme (for non authenticated users, always use light theme)
+            'enable_collections': settings.ENABLE_COLLECTIONS,
         })
 
     return tvars

freesound/settings.py

@@ -78,6 +78,7 @@
     'admin_reorder',
     'captcha',
     'adminsortable',
+    'fscollections'
 ]
 
 # Specify custom ordering of models in Django Admin index
@@ -927,6 +928,8 @@
 # -------------------------------------------------------------------------------
 # Extra Freesound settings
 
+ENABLE_COLLECTIONS = True
+
 # Paths (depend on DATA_PATH potentially re-defined in local_settings.py)
 # If new paths are added here, remember to add a line for them at general.apps.GeneralConfig. This will ensure
 # directories are created if not existing

freesound/static/bw-frontend/src/components/collections.js

@@ -0,0 +1,104 @@
+import {dismissModal, handleGenericModal} from "./modal";
+import {showToast} from "./toast";
+import {makePostRequest} from "../utils/postRequest";
+
+const saveCollectionSound = (collectionSoundUrl, data) => {
+
+    let formData = {};
+    if (data === undefined){
+        formData.name = "";
+        formData.collection = "";
+        formData.new_collection_name = "";
+        formData.use_last_collection = true;
+    } else {
+        formData = data;
+    }
+    makePostRequest(collectionSoundUrl, formData, (responseText) => {
+        // Collection attribute saved successfully. Close model and show feedback
+        dismissModal('collectSoundModal'); // TBC
+        try {
+            showToast(JSON.parse(responseText).message);
+        } catch (error) {
+            // If not logged in, the url will respond with a redirect and JSON parsing will fail
+            showToast("You need to be logged in before using collections.")
+        }
+    }, () => {
+        // Unexpected errors happened while processing request: close modal and show error in toast
+        dismissModal('collectSoundModal');
+        showToast('Some errors occurred while adding the sound to the collection.');
+    });
+}
+
+
+const toggleNewCollectionNameDiv = (select, newCollectionNameDiv) => {
+    if (select.value == '0'){
+        // No category is selected, show the new category name input
+        newCollectionNameDiv.classList.remove('display-none');
+    } else {
+        newCollectionNameDiv.classList.add('display-none');
+    }
+}
+
+
+const initCollectionFormModal = (soundId, collectionSoundUrl) => {
+
+    // Modify the form structure to add a "Category" label inline with the select dropdown
+    const modalContainer = document.getElementById('collectSoundModal');
+    const selectElement = modalContainer.getElementsByTagName('select')[0];
+    const wrapper = document.createElement('div');
+    wrapper.style = 'display:inline-block;';
+    if (selectElement === undefined){
+        // If no select element, the modal has probably loaded for an unauthenticated user
+        return;
+    }
+    selectElement.parentNode.insertBefore(wrapper, selectElement.parentNode.firstChild);
+    const label = document.createElement('div');
+    label.innerHTML = "Select a collection:"
+    label.classList.add('text-grey');
+    wrapper.appendChild(label)
+    wrapper.appendChild(selectElement)
+
+    const formElement = modalContainer.getElementsByTagName('form')[0];
+    const buttonsInModalForm = formElement.getElementsByTagName('button');
+    const saveButtonElement = buttonsInModalForm[buttonsInModalForm.length - 1];
+    const categorySelectElement = document.getElementById(`id_${  soundId.toString()  }-collection`);
+
+    const newCategoryNameElement = document.getElementById(`id_${  soundId.toString()  }-new_collection_name`);
+    toggleNewCollectionNameDiv(categorySelectElement, newCategoryNameElement);
+    categorySelectElement.addEventListener('change', (event) => {
+    toggleNewCollectionNameDiv(categorySelectElement, newCategoryNameElement);
+    });
+
+    // Bind action to save collection attribute and prevent default submit
+    saveButtonElement.addEventListener('click', (e) => {
+        e.preventDefault();
+        const data = {};
+        data.collection = document.getElementById(`id_${  soundId.toString()  }-collection`).value;
+        data.new_collection_name = document.getElementById(`id_${  soundId.toString()  }-new_collection_name`).value;
+        saveCollectionSound(collectionSoundUrl, data);
+    });
+};
+
+const bindCollectionModals = (container) => {
+    const collectionButtons = [...container.querySelectorAll('[data-toggle="collection-modal"]')];
+    collectionButtons.forEach(element => {
+        if (element.dataset.alreadyBinded !== undefined){
+            return;
+        }
+        element.dataset.alreadyBinded = true;
+        element.addEventListener('click', (evt) => {
+            evt.preventDefault();   
+            const modalUrlSplitted = element.dataset.modalUrl.split('/');
+            const soundId = parseInt(modalUrlSplitted[modalUrlSplitted.length - 2], 10);
+            if (!evt.altKey) {
+                handleGenericModal(element.dataset.modalUrl, () => {
+                    initCollectionFormModal(soundId, element.dataset.collectionSoundUrl);
+                }, undefined, true, true);
+            } else {
+                saveCollectionSound(element.dataset.collectionSoundUrl);
+            }
+        });
+    });
+}
+
+export { bindCollectionModals };

freesound/static/bw-frontend/src/components/player/player-ui.js

@@ -521,7 +521,7 @@ const createPlayerControls = (parentNode, playerImgNode, audioElement, playerSiz
   return playerControls
 }
 
-const createPlayerTopControls = (parentNode, playerImgNode, playerSize, showSimilarSoundsButton, showBookmarkButton, showRemixGroupButton) => {
+const createPlayerTopControls = (parentNode, playerImgNode, playerSize, showSimilarSoundsButton, showBookmarkButton, showRemixGroupButton, showCollectionButton) => {
   const topControls = document.createElement('div')
   topControls.className = 'bw-player__top_controls right'
   if (showRemixGroupButton){
@@ -536,6 +536,10 @@ const createPlayerTopControls = (parentNode, playerImgNode, playerSize, showSimi
     const bookmarkButton = createSetFavoriteButton(parentNode, playerImgNode)
     topControls.appendChild(bookmarkButton)
   }
+  if (showCollectionButton){
+    const collectionButton = createCollectionButton(parentNode, playerImgNode)
+    topControls.appendChild(collectionButton)
+  }
   if (playerSize == 'big'){
     const rulerIndicator = createRulerIndicator(playerImgNode);
     topControls.appendChild(rulerIndicator)
@@ -557,15 +561,35 @@ const createPlayerTopControls = (parentNode, playerImgNode, playerSize, showSimi
  * @param {HTMLDivElement} parentNode
  * @param {HTMLImgElement} playerImgNode
  */
+
+const createCollectionButton = (parentNode, playerImgNode) => {
+  const collectionButtonContainer = document.createElement('div');
+  const collectionButton = createControlButton('bookmark');
+  collectionButton.setAttribute('title', 'Add to collection');
+  collectionButton.setAttribute('aria-label', 'Add to collection');
+  collectionButtonContainer.classList.add('bw-player__favorite');
+  collectionButtonContainer.addEventListener('pointerup', evt => evt.stopPropagation());
+  collectionButtonContainer.addEventListener('click', (evt) => evt.stopPropagation());
+
+  if (isTouchEnabledDevice()){
+    // For touch-devices (phones, tablets), we keep player controls always visible because hover tips are not that visible
+    // Edit: the bookmark button all alone makes players look ugly, so we don't make them always visible even in touch devices
+    //favoriteButtonContainer.classList.add('opacity-050')
+  }
+  collectionButton.setAttribute('data-toggle', 'collection-modal');
+  collectionButton.setAttribute('data-modal-url', parentNode.dataset.collectionModalUrl);
+  collectionButton.setAttribute('data-collection-sound-url', parentNode.dataset.collectionSoundUrl); 
+  collectionButtonContainer.appendChild(collectionButton);
+  return collectionButtonContainer;
+}
+
 const createSetFavoriteButton = (parentNode, playerImgNode) => {
   const getIsFavorite = () => false // parentNode.dataset.favorite === 'true' // We always show the same button even if sound already bookmarked
   const favoriteButtonContainer = document.createElement('div')
   const favoriteButton = createControlButton('bookmark')
   const unfavoriteButton = createControlButton('bookmark-filled')
   favoriteButton.setAttribute('title', 'Bookmark this sound')
   favoriteButton.setAttribute('aria-label', 'Bookmark this sound')
-  unfavoriteButton.setAttribute('title', 'Remove bookmark')
-  unfavoriteButton.setAttribute('aria-label', 'Remove bookmark')
   favoriteButtonContainer.classList.add('bw-player__favorite')
 
   if (isTouchEnabledDevice()){
@@ -671,6 +695,7 @@ const createPlayer = parentNode => {
   const showBookmarkButton = parentNode.dataset.bookmark === 'true'
   const showSimilarSoundsButton = parentNode.dataset.similarSounds === 'true'
   const showRemixGroupButton = parentNode.dataset.remixGroup === 'true'
+  const showCollectionButton = parentNode.dataset.collection === 'true'
   const audioElement = createAudioElement(parentNode)
   audioElement.addEventListener('play', () => {
     // When a player is played, add the last-played class to it and remove it from other players that might have it
@@ -687,7 +712,7 @@ const createPlayer = parentNode => {
   parentNode.appendChild(audioElement)
   const controls = createPlayerControls(parentNode, playerImgNode, audioElement, playerSize)
   playerImage.appendChild(controls)
-  const topControls = createPlayerTopControls(parentNode, playerImgNode, playerSize, showSimilarSoundsButton, showBookmarkButton, showRemixGroupButton)
+  const topControls = createPlayerTopControls(parentNode, playerImgNode, playerSize, showSimilarSoundsButton, showBookmarkButton, showRemixGroupButton, showCollectionButton)
   playerImage.appendChild(topControls)
 
   const rateSoundHiddenWidget = parentNode.parentNode.getElementsByClassName('bw-player__rate__widget')[0]

freesound/static/bw-frontend/src/utils/initHelper.js

@@ -20,6 +20,7 @@ import { makeSelect } from '../components/select.js';
 import { makeTextareaCharacterCounter } from '../components/textareaCharactersCounter.js';
 import { bindUnsecureImageCheckListeners } from '../components/unsecureImageCheck.js';
 import { initMap } from '../pages/map.js';
+import { bindCollectionModals } from '../components/collections.js';
 
 
 const initializeStuffInContainer = (container, bindModals, activateModals) => {
@@ -53,6 +54,7 @@ const initializeStuffInContainer = (container, bindModals, activateModals) => {
         bindRemixGroupModals(container);
         bindBookmarkSoundModals(container);
         bindUserAnnotationsModal(container); 
+        bindCollectionModals(container);
     }
 
     // Activate modals if needed (this should only be used the first time initializeStuffInContainer is called)

freesound/urls.py

@@ -34,6 +34,7 @@
 import bookmarks.views
 import follow.views
 import donations.views
+import fscollections.views
 import utils.tagrecommendation_utilities as tagrec
 from apiv2.apiv2_utils import apiv1_end_of_life_message
 
@@ -116,6 +117,7 @@
     path('tickets/', include('tickets.urls')),
     path('monitor/', include('monitor.urls')),
     path('follow/', include('follow.urls')),
+    path('collections/', include('fscollections.urls')),
 
     path('blog/', RedirectView.as_view(url='https://blog.freesound.org/'), name="blog"),
 

fscollections/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

fscollections/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class FscollectionsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'fscollections'