[ADD] music_player: a single page application

music-player/__init__.py

@@ -0,0 +1,4 @@
+# -*- coding: utf-8 -*-
+
+from . import controllers
+from . import models

music-player/__manifest__.py

@@ -0,0 +1,38 @@
+# -*- coding: utf-8 -*-
+{
+    'name': "musicPlayer",
+
+    'summary': """
+        Short (1 phrase/line) summary of the module's purpose, used as
+        subtitle on modules listing or apps.openerp.com""",
+
+    'description': """
+        Long description of module's purpose
+    """,
+
+    'author': "My Company",
+    'website': "https://www.yourcompany.com",
+
+    # Categories can be used to filter modules in modules listing
+    # Check https://github.com/odoo/odoo/blob/16.0/odoo/addons/base/data/ir_module_category_data.xml
+    # for the full list
+    'category': 'Uncategorized',
+    'version': '0.1',
+
+    # any module necessary for this one to work correctly
+    'depends': ['base'],
+
+    # always loaded
+    'data': [
+        'security/ir.model.access.csv',
+        'views/views.xml',
+        'views/templates.xml',
+    ],
+
+    # only loaded in demonstration mode
+    'demo': [
+        'demo/demo.xml',
+    ],
+    'installable':True,
+    'application':True,
+}

music-player/controllers/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+from . import controllers

music-player/controllers/controllers.py

@@ -0,0 +1,34 @@
+# -*- coding: utf-8 -*-
+from odoo import http
+from odoo.http import Response
+import json
+from odoo.modules.module import get_module_resource
+
+
+
+class MusicPlayer(http.Controller): 
+    @http.route('/music', auth='public')
+    def index(self, **kw):
+        return http.request.render('music_player.music_template')
+
+    @http.route('/music/search', auth='public',type="http",methods=["GET"])
+    def search(self, **kw):
+        # Retrieve the song name from search query
+        song_name = kw.get('song_name')
+        musics=http.request.env['music_player.music_player'].search_read([('name','ilike',song_name)],fields={"name","url"})
+        if not musics:
+            musics= "Song not found"
+
+        return Response(json.dumps({'result':musics}),content_type='application/json')
+
+    @http.route('/music/<model("music_player.music_player"):music>',type='http',auth='public')
+    def object(self, music, **kw):
+        music_file_path=get_module_resource('music_player','static/songs',music.filename)
+        file = open(music_file_path,'rb').read()
+        return file
+
+#     @http.route('/music_player/music_player/objects/<model("music_player.music_player"):obj>', auth='public')
+#     def object(self, obj, **kw):
+#         return http.request.render('music_player.object', {
+#             'object': obj
+#         })

music-player/demo/demo.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+  <record model="music_player.music_player" id="song1">
+    <field name="name">Akon-Be-With-You</field>
+    <field name="filename">Akon-Be-With-You.mp3</field>
+  </record>
+  <record model="music_player.music_player" id="song2">
+    <field name="name">Akon-Beautiful</field>
+    <field name="filename">Akon-Beautiful.mp3</field>
+  </record>
+  <record model="music_player.music_player" id="song3">
+    <field name="name">Akon-Birthmark</field>
+    <field name="filename">Akon-Birthmark.mp3</field>
+  </record>
+  <record model="music_player.music_player" id="song4">
+    <field name="name">Akon-Keep-You-Much-Longer</field>
+    <field name="filename">Akon-Keep-You-Much-Longer.mp3</field>
+  </record>
+  <record model="music_player.music_player" id="song5">
+    <field name="name">Akon-Sunny-Day</field>
+    <field name="filename">Akon-Sunny-Day.mp3</field>
+  </record>
+
+  <record model="music_player.music_player" id="song6">
+      <field name="name">Temp-song-1</field>
+      <field name="filename">Temp-song-1.mp3</field>
+    </record>
+    <record model="music_player.music_player" id="song7">
+      <field name="name">Temp-song-2</field>
+      <field name="filename">Temp-song-2.mp3</field>
+    </record>
+    <record model="music_player.music_player" id="song8">
+      <field name="name">Temp-song-3</field>
+      <field name="filename">Temp-song-3.mp3</field>
+    </record>
+</odoo>

music-player/models/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+from . import player

music-player/models/player.py

@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+
+from odoo import models, fields, api
+
+
+class music_player(models.Model):
+    _name = 'music_player.music_player'
+    _description = 'music_player.music_player'
+
+    name = fields.Char()
+    filename=fields.Char("File name")
+    url=fields.Char(compute="_compute_url")
+
+    def _compute_url(self):
+        for record in self:
+            record.url = record.get_base_url() + '/music/' + str(record.id)
+
+#     value = fields.Integer()
+#     value2 = fields.Float(compute="_value_pc", store=True)
+#     description = fields.Text()
+#
+#     @api.depends('value')
+#     def _value_pc(self):
+#         for record in self:
+#             record.value2 = float(record.value) / 100

music-player/security/ir.model.access.csv

@@ -0,0 +1,2 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_music_player_music_player,music_player.music_player,model_music_player_music_player,,1,1,1,1

music-player/static/app.js

@@ -0,0 +1,193 @@
+
+const { Component, xml, mount, useState,useEffect, setup } = owl;
+let audio = '';
+
+
+class SongItems extends Component {
+    static template = xml`
+    <div style="float:right;margin-right:2%">
+        <table>
+            <t t-if="props.songitems[0]">
+            <h1>Playlist</h1>
+            <hr/>
+                <t t-foreach="props.songitems" t-as="song" t-key="song.id">
+                    <tr>
+                        <td>
+                            <div>
+                                <p id="song_name"><t t-out="song.name"/></p>
+                                <button  t-on-click="removeSongFromList" id="listadded" t-att-value="song.url">Remove</button>
+                                <button  t-att-value="song.url" t-on-click="playThisSong">Play song</button>
+                            </div>
+                        </td>
+                    </tr>
+                </t>
+            </t>
+        </table>
+    </div>
+    `;
+
+    removeSongFromList(ev) {
+        const selectedSongUrl = ev.target.getAttribute('value');
+        const selectedIndex = this.props.songitems.findIndex(song => song.url === selectedSongUrl);
+        if (selectedIndex !== -1) {
+            this.props.songitems.splice(selectedIndex, 1);
+        }
+        }
+
+    playThisSong(ev) {  
+        const selectedSongUrl = ev.target.getAttribute('value');
+        const selectedSong = this.props.songitems.find(song => song.url === selectedSongUrl);
+        document.getElementById('song-title').textContent = selectedSong.name;
+        audio = new Audio(selectedSongUrl);
+        audio.pause();
+        audio.currentTime = 0;
+        audio.play();
+    }
+
+    static props = ['songitems']
+}
+
+class PlayList extends Component {
+    static template = xml`
+    <div id="MusicList">
+        <SongItems songitems="props.playlist"/>
+    </div>
+    `;
+
+    static props = ['playlist'];
+    static components = { SongItems };
+}
+
+class Player extends Component {
+    static template = xml`
+    <div style="Position:absolute;bottom:10px;width:100%;text-align:center">
+        <h2 id="song-title">Song Title</h2>
+        <div id="player-controls">
+            <button id="pause-button" t-on-click="pauseThisSong">Pause</button>
+            <button id="play_btn" t-on-click="playThisSong">Play</button>
+            <button id="stop-button" t-on-click="stopThisSong">Stop</button>
+        </div>
+    </div>`;
+    playThisSong() {
+        if (!audio) {
+        return;
+        }
+        audio.play();
+    }
+    pauseThisSong() {
+        if (!audio) {
+        return;
+        }
+        audio.pause();
+    }
+    stopThisSong() {
+        if (!audio) {
+        return;
+        }
+        audio.pause();
+        audio.currentTime = 0;
+        }
+    }
+
+
+class MusicList extends Component {
+    static template = xml`
+    <div id="MusicList" style="width:40%;float:left;margin-left:2%;">
+    <table>  
+        <t t-if="props.musicdata[0]">          
+            <t t-if="props.musicdata[0] !== 'Song not Found'">
+                <h1 style="text-align:center">Song List</h1>
+                <hr/>
+                <t t-foreach="props.musicdata[0]" t-as="song" t-key="song.id">
+
+                    <p><t t-out="song.name"/></p>
+                    <button  t-att-value="song.url" t-on-click="addSongToPlaylist">Add to playlist</button>
+                    <button  t-att-value="song.url" t-on-click="playSong">Play song</button>                
+                </t>
+            </t>
+        </t>
+        <Player/>
+        </table>
+    </div>
+    `;
+
+
+    addSongToPlaylist(ev) {
+        let musicInfo = this.props.musicdata[0];
+        console.log(musicInfo)
+        const selectedSongUrl = ev.target.getAttribute('value');
+        const selectedSong = musicInfo.find(song => song.url === selectedSongUrl);
+        this.props.updateAddToPlayList(selectedSong); 
+    }
+
+    playSong(ev) {
+        let musicInfo =  this.props.musicdata[0];
+        const selectedSongUrl = ev.target.getAttribute('value');
+        const selectedSong = musicInfo.find(song => song.url === selectedSongUrl);
+        document.getElementById('song-title').textContent = selectedSong.name;
+        audio = new Audio(selectedSongUrl);
+        audio.play();
+    }
+
+    static props = ['musicdata', 'updateAddToPlayList'];
+
+    static components = { Player };
+    }
+
+class Search extends Component {
+    static template = xml`
+    <div>
+        <div style="border:1px,solid,black;text-align:center">
+            <input type="text" id="searchSong" placeholder="Search a music" value="Akon"/>
+            <button t-on-click="getMusic" id="SearchButton">Search</button>
+        </div>
+        <MusicList musicdata="searchData"  updateAddToPlayList="props.updateAddToPlayList"/>
+    </div>
+    `;
+    setup() {
+        this.searchData = useState([]);
+
+    }
+
+    async getMusic() {
+        const findSong = document.getElementById('searchSong').value;
+        const response = await fetch(`/music/search?song_name=${findSong}`);
+        const {result : newData}= await response.json();
+        this.searchData.pop();
+        this.searchData.push(newData);
+    }
+
+
+
+    static components = { MusicList }
+
+    static props = ['updateAddToPlayList'];
+}
+
+class Root extends Component {
+
+    static template = xml `
+    <link rel="stylesheet" href="/music_player/static/style.css"></link>
+    <div id="Container" style="position:relative;height:100%">
+        <div>  
+        <Search updateAddToPlayList="this.updateAddToPlayList"/>
+        </div>
+        <PlayList playlist="addToPlaylist"/>
+
+    </div>`;
+
+    setup(){
+        this.addToPlaylist = useState([]);
+    }
+
+    updateAddToPlayList = (newData) => {
+        this.addToPlaylist.push(newData);
+    }
+
+    static components = { Search, PlayList };
+}
+
+window.onload = function() {
+  mount(Root, document.body);
+};
+