Music Player

music_player/__manifest__.py

@@ -32,6 +32,6 @@
     'demo': [
         'demo/demo.xml',
     ],
-    'installable': True,
-    'application': True,
+    'installable':True,
+    'application':True
 }

music_player/controllers/controllers.py

@@ -1,29 +1,31 @@
 # -*- coding: utf-8 -*-
-import json
 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 the search query
-        song_name = kw.get('song_name')
-        # you will be facing you are not allowed to acces this model ---> add to manifest the csv file. remove group for now
-        musics = http.request.env['music_player.music_player'].search_read([('name', 'ilike', song_name)],fields={"name", "url"})
+    @http.route('/music/search', auth='public',type="http",methods=["GET"])
+    def list(self, **kw):
+        song_name=kw.get("song_name")
+        musics=http.request.env['music_player.music_player'].search_read([('name','ilike',song_name)],fields={"name","url"})
+        print(musics)
         if not musics:
-            musics = "Song not Found"
-
-        return Response(json.dumps({'result': musics}), content_type='application/json')
+            musics="Song Not Found"
 
-    # A controller to play song from the audio
+        return Response(json.dumps({'result':musics}),content_type="application/json")
+
 
-    @http.route('/music/<model("music_player.music_player"):music>', type='http', auth="public", methods=["GET"])
-    def load(self, music, **kw):
-        music_file_path = get_module_resource('music_player', 'static/songs', music.filename)
-        file = open(music_file_path, 'rb').read()
+
+    @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
+

music_player/demo/demo.xml

@@ -33,4 +33,4 @@
       <field name="name">Temp-song-3</field>
       <field name="filename">Temp-song-3.mp3</field>
     </record>
-</odoo>
+</odoo>

music_player/models/player.py

@@ -7,10 +7,15 @@ class music_player(models.Model):
     _name = 'music_player.music_player'
     _description = 'music_player.music_player'
 
-    name = fields.Char('Song Name')
-    filename = fields.Char("File name")
-    url = fields.Char(compute="_compute_url") # for a computed url
-    
+    name = fields.Char()
+    filename = fields.Char()
+    url = fields.Char(compute="_compute_url")
+
     def _compute_url(self):
         for record in self:
-            record.url = record.get_base_url() + '/music/' + str(record.id)
+            record.url=record.get_base_url()+"/music/"+str(record.id)
+#
+#     @api.depends('value')
+#     def _value_pc(self):
+#         for record in self:
+#             record.value2 = float(record.value) / 100

music_player/security/ir.model.access.csv

@@ -1,2 +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.access_music_player_music_player,access_music_player_music_player,music_player.model_music_player_music_player,,1,1,1,1

music_player/static/app.js

@@ -1,129 +1,139 @@
-/** @odoo-module**/
-
-const { Component, xml, mount, setup, useState }  = owl;
-
-let audio = '';
-class Player extends Component {
-    static template = xml`
-        <div style="position:absolute;bottom:0px">
-            <h2 id="song-title">Song Title</h2>
-            <div>
-                <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;
+const{Component,xml,mount,useState}=owl;
+
+let audio=''
+
+class Player extends Component{
+    static template=xml`
+    <div style="position:absolute;bottom:0px">
+        <h2 id="song_title">song title</h2>
+        <div>
+            <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 PlayList extends Component {
-//     static template = xml`
-//         <div style="float:right">
-
-//         </div>
-//         `;
-
-// }
-
-class MusicList extends Component {
+class PlayList extends Component {
     static template = xml`
-        <div id="MusicList" style="float:left">
-        <t t-if="props.searchData[0] and props.searchData[0] !== 'Song not Found'">
-        <h2>List of Songs</h2>
-        <t t-foreach="props.searchData[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>
+    <div id="PlayList" style="float:right">
+        <h2>Playlist</h2>
+        <t t-if="props.playData[0]">     
+            <t t-foreach="props.playData" t-as="song" t-key="song.id">
+                <p><t t-out="song.name"/></p>
+                <button t-att-value="song.url" t-on-click="removeSongFromPlayList">Remove from playlist</button>
+                <button t-att-value="song.url" t-on-click="playSong">Play Song</button>
+            </t>
         </t>
-        <Player/>
-        </div>
-        `;
+    </div>
+    `;
 
-        addSongToPlaylist () {
-            //TAsk:
-            // add Playlist component as the child of root component and when addSongToPlaylist method is called update the 
-            //PlayList component template with the song thats added.
-            // hint use callback method as which update the props u are passing to PlayList component.
-        }
+    removeSongFromPlayList(ev) {
+        const selectedSongUrl = ev.target.getAttribute('value');
+        const selectedSong = this.props.playData.findIndex(song => song.url===selectedSongUrl);
+        this.props.playData.splice(selectedSong,1);
+    }
 
-        playSong(ev) {
-            // in case a audio is already playing stop it to play another.
-            if (audio) {
-              audio.pause();
-              audio.currentTime = 0;
-            }
-              const selectedSongUrl = ev.target.getAttribute('value');
-              const selectedSong = this.props.searchData[0].find(song => song.url === selectedSongUrl);
-              document.getElementById('song-title').textContent = selectedSong.name;
-              audio = new Audio(selectedSongUrl);
-              audio.play();
-          }
-    static props = ['searchData'];
+    playSong(ev) {
+        const selectedSongUrl = ev.target.getAttribute('value');
+        const selectedSong = this.props.playData.find(song => song.url===selectedSongUrl);
+        document.getElementById("song_title").textContent = selectedSong.name;
+        audio = new Audio(selectedSongUrl);
+        audio.play();
+    }
+}
+class MusicList extends Component{
+    static template=xml`
+    <div style="float:left">
+        <t t-if="props.searchData[0] and props.searchData[0] !== 'Song Not Found'">
+            <h2>list of song</h2>
+            <t t-foreach="props.searchData[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">playsong</button>
+            </t>
+        </t>
+        <Player />
+    </div>
+    `;
+    addSongToPlaylist(ev){
+        const selectedSongUrl = ev.target.getAttribute('value');
+        const selectedSong = this.props.searchData[0].find(song => song.url===selectedSongUrl);
+        this.props.addToPlayList(selectedSong);
 
-    static components = { Player }; 
+    }
+    playSong(ev){
+        const selectedSongUrl = ev.target.getAttribute('value');
+        const selectedSong = this.props.searchData[0].find(song=> song.url === selectedSongUrl)
+        document.getElementById('song_title').textContent = selectedSong.name;
+        audio= new Audio(selectedSongUrl);
+        audio.play()
+    }
+    static props=["searchData"];
+    static components={Player};
 }
 
-class Search extends Component {
-    static template = xml `
-    <div style="text-align:center">
-            <input type="text" id="searchSong" placeholder="Search a music" value="Akon"/>
-            <button t-on-click="getMusic" id="SearchButton">Search</button>
-            <MusicList searchData="searchData"/>
+class Search extends Component{
+    static template=xml`
+    <div style="text-align:center;">
+        <input type="text" id="searchsong" placeholder="music search" value="Freedom"/>
+        <button t-on-click="getMusic" id="searchButton">search</button>
+        <MusicList searchData="searchData" addToPlayList="props.addToPlayList" playData="props.playData"/>
     </div>
     `;
-    setup() {
-        this.searchData = useState([]);
+    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(); // add pop to remove previously searched data.
+    async getMusic(){
+        const findSong=document.getElementById("searchsong").value;
+        console.log(findSong);
+        const response=await fetch(`/music/search?song_name=${findSong}`);
+        console.log(response);
+        const {result: newData}=await response.json();
+        console.log(newData)
         this.searchData.push(newData);
     }
-
-    static components = { MusicList }
+    static components={MusicList};
 }
 
-class Root extends Component { // import from owl
-    // import from owl
-    static template = xml ` 
-    <style>
-    body {
-        margin: 0;
-        padding: 0;
-        height: 100vh;
-    }
-    </style>
-    <div id="Container" style="position:relative;height:100%">
-        <Search/>
+class Root extends Component{
+    static template=xml`
+    <div>
+        <Search addToPlayList="this.addToPlayList" playData="playData"/>
+        <PlayList playData="playData"/>
     </div>
+
+
     `;
+    setup() {
+        this.playData = useState([]);
+    }
 
-    static components = { Search }; 
+    addToPlayList(song) {
+        this.playData.push(song);
+    }
+    static components={Search,PlayList};
 }
 
-window.onload = function() {
-    mount(Root, document.body);
+window.onload=function(){
+    mount(Root,document.body);
 };